Tweakimp
Reputation: 413
How do line up thead and tbody columns?
I finally managed to fix the thead and make tbody scrollable, but I cant figure out how to align the columns.
I only want to be able to scroll through tbody vertically with thead fixed on top and horizontally if needed through both at the same time.
I dont think the scrollbar is the problem as you can see here :
Note how blue has a different width than green. If I would adjust the width of the whole row by a fixed amount, that difference would still be there.
It would be cool to get a 100% CSS solution if possible.
My table looks like this:
/*container */
#club_plan {
overflow-x: auto;
width: 50%;
}
thead tr {
position: relative;
}
tbody {
display: block;
max-height: 150px;
overflow-x: auto;
width: 100%
}
thead {
display: table;
width: 100%
}
/* decoration */
table {
font: 12px Verdana;
}
td,
th {
padding: 5px;
border: 1px solid #888888;
}<body>
<div id="club_plan" style="display: block; overflow-x: auto;">
<table border="0" cellpadding="0" cellspacing="0" class="result-set" id="club_plan_table">
<thead>
<tr>
<th>Tag</th>
<th>Datum</th>
<th>Uhrzeit</th>
<th>Liga</th>
<th>Heimmannschaft</th>
<th>Gastmannschaft</th>
</tr>
</thead>
<tbody>
<tr>
<td nowrap>Do.</td>
<td class=" highlightcell" nowrap>Heute</td>
<td nowrap>19:45</td>
<td nowrap>H1KK</td>
<td class=" teams" nowrap>TuS Hiltrup V</td>
<td class=" teams highlightcell" nowrap>DJK Borussia Münster IV</td>
</tr>
<tr>
<td nowrap>Fr.</td>
<td nowrap>30.09.2016</td>
<td nowrap>19:30</td>
<td nowrap>H3KK</td>
<td class=" teams" nowrap>SC Westfalia Kinderhaus V</td>
<td class=" teams highlightcell" nowrap>DJK Borussia Münster VI</td>
</tr>
<tr>
<td class="tabelle-rowspan"></td>
<td class="tabelle-rowspan"></td>
<td class=" teams" nowrap title="verlegt, ursprünglicher Termin: 01.10.2016 18:30">20:00 v</td>
<td nowrap>HBL</td>
<td class=" teams highlightcell" nowrap>DJK Borussia Münster II</td>
<td class=" teams" nowrap>1. TTC Münster III</td>
</tr>
<tr>
<td nowrap>Sa.</td>
<td nowrap>01.10.2016</td>
<td nowrap>18:30</td>
<td class=" teams" nowrap>HNRWL</td>
<td class=" teams highlightcell" nowrap>DJK Borussia Münster</td>
<td class=" teams" nowrap>1. TTC Münster</td>
</tr>
<tr>
<td class="tabelle-rowspan"></td>
<td class="tabelle-rowspan"></td>
<td nowrap>18:30</td>
<td class=" teams" nowrap>DNRWL</td>
<td class=" teams highlightcell" nowrap>DJK Borussia Münster</td>
<td class=" teams" nowrap>TTC Werne 98</td>
</tr>
<tr>
<td nowrap>Di.</td>
<td nowrap>04.10.2016</td>
<td nowrap>20:15</td>
<td nowrap>H1KK</td>
<td class=" teams highlightcell" nowrap>DJK Borussia Münster IV</td>
<td class=" teams" nowrap>1. TTC Münster VII</td>
</tr>
<tr>
<td nowrap>Do.</td>
<td nowrap>06.10.2016</td>
<td nowrap>20:00</td>
<td nowrap>H2KK</td>
<td class=" teams" nowrap>1. FC Gievenbeck IV</td>
<td class=" teams highlightcell" nowrap>DJK Borussia Münster V</td>
<tr>
<td nowrap>Fr.</td>
<td nowrap>07.10.2016</td>
<td nowrap>19:30</td>
<td nowrap>HKL</td>
<td class=" teams" nowrap>DJK SC Nienberge</td>
<td class=" teams highlightcell" nowrap>DJK Borussia Münster III</td>
</tr>
<tr>
<td nowrap>Sa.</td>
<td nowrap>08.10.2016</td>
<td class=" teams" nowrap title="verlegt, ursprünglicher Termin: 08.10.2016 18:30">17:30 v</td>
<td nowrap>HBL</td>
<td class=" teams" nowrap>SC Westfalia Kinderhaus II</td>
<td class=" teams highlightcell" nowrap>DJK Borussia Münster II</td>
<tr>
<td class="tabelle-rowspan"></td>
<td class="tabelle-rowspan"></td>
<td nowrap>18:30</td>
<td class=" teams" nowrap>DNRWL</td>
<td class=" teams" nowrap>TSSV Bottrop</td>
<td class=" teams highlightcell" nowrap>DJK Borussia Münster</td>
</tr>
<tr>
<td nowrap>So.</td>
<td nowrap>09.10.2016</td>
<td nowrap>10:00</td>
<td class=" teams" nowrap>HNRWL</td>
<td class=" teams" nowrap>GSV Fröndenberg</td>
<td class=" teams highlightcell" nowrap>DJK Borussia Münster</td>
</tr>
</tbody>
</table>
</div>
</body>Upvotes: 2
Views: 2949
Answers (3)
user6888351
Reputation:
Add width: 150px; height: 30px; display: inline-block; to td, th
then add white-space: nowrap; to table
https://jsfiddle.net/amwokx66/17/
Upvotes: 1
Cladiuss
Reputation: 535
You should not set the thead with display: table;, and tbody with display: block;
Try removing those properties.
Edit : If you want to keep the maximum height, put the max-height on the #club_plan.
Note : Add the thead height to the max-height if you want the tbody's height to be 150px max.
/*container */
#club_plan {
overflow-x: auto;
width: 50%;
max-height: 150px;
/* max-height: 177px; if you want the tbody to be 150px max (thead has a height of 27px */
}
thead tr {
position: relative;
}
tbody {
overflow-x: auto;
width: 100%
}
/* decoration */
table {
font: 12px Verdana;
}
td,
th {
padding: 5px;
border: 1px solid #888888;
}<body>
<div id="club_plan" style="display: block; overflow-x: auto;">
<table border="0" cellpadding="0" cellspacing="0" class="result-set" id="club_plan_table">
<thead>
<tr>
<th>Tag</th>
<th>Datum</th>
<th>Uhrzeit</th>
<th>Liga</th>
<th>Heimmannschaft</th>
<th>Gastmannschaft</th>
</tr>
</thead>
<tbody>
<tr>
<td nowrap>Do.</td>
<td class=" highlightcell" nowrap>Heute</td>
<td nowrap>19:45</td>
<td nowrap>H1KK</td>
<td class=" teams" nowrap>TuS Hiltrup V</td>
<td class=" teams highlightcell" nowrap>DJK Borussia Münster IV</td>
</tr>
<tr>
<td nowrap>Fr.</td>
<td nowrap>30.09.2016</td>
<td nowrap>19:30</td>
<td nowrap>H3KK</td>
<td class=" teams" nowrap>SC Westfalia Kinderhaus V</td>
<td class=" teams highlightcell" nowrap>DJK Borussia Münster VI</td>
</tr>
<tr>
<td class="tabelle-rowspan"></td>
<td class="tabelle-rowspan"></td>
<td class=" teams" nowrap title="verlegt, ursprünglicher Termin: 01.10.2016 18:30">20:00 v</td>
<td nowrap>HBL</td>
<td class=" teams highlightcell" nowrap>DJK Borussia Münster II</td>
<td class=" teams" nowrap>1. TTC Münster III</td>
</tr>
<tr>
<td nowrap>Sa.</td>
<td nowrap>01.10.2016</td>
<td nowrap>18:30</td>
<td class=" teams" nowrap>HNRWL</td>
<td class=" teams highlightcell" nowrap>DJK Borussia Münster</td>
<td class=" teams" nowrap>1. TTC Münster</td>
</tr>
<tr>
<td class="tabelle-rowspan"></td>
<td class="tabelle-rowspan"></td>
<td nowrap>18:30</td>
<td class=" teams" nowrap>DNRWL</td>
<td class=" teams highlightcell" nowrap>DJK Borussia Münster</td>
<td class=" teams" nowrap>TTC Werne 98</td>
</tr>
<tr>
<td nowrap>Di.</td>
<td nowrap>04.10.2016</td>
<td nowrap>20:15</td>
<td nowrap>H1KK</td>
<td class=" teams highlightcell" nowrap>DJK Borussia Münster IV</td>
<td class=" teams" nowrap>1. TTC Münster VII</td>
</tr>
<tr>
<td nowrap>Do.</td>
<td nowrap>06.10.2016</td>
<td nowrap>20:00</td>
<td nowrap>H2KK</td>
<td class=" teams" nowrap>1. FC Gievenbeck IV</td>
<td class=" teams highlightcell" nowrap>DJK Borussia Münster V</td>
<tr>
<td nowrap>Fr.</td>
<td nowrap>07.10.2016</td>
<td nowrap>19:30</td>
<td nowrap>HKL</td>
<td class=" teams" nowrap>DJK SC Nienberge</td>
<td class=" teams highlightcell" nowrap>DJK Borussia Münster III</td>
</tr>
<tr>
<td nowrap>Sa.</td>
<td nowrap>08.10.2016</td>
<td class=" teams" nowrap title="verlegt, ursprünglicher Termin: 08.10.2016 18:30">17:30 v</td>
<td nowrap>HBL</td>
<td class=" teams" nowrap>SC Westfalia Kinderhaus II</td>
<td class=" teams highlightcell" nowrap>DJK Borussia Münster II</td>
<tr>
<td class="tabelle-rowspan"></td>
<td class="tabelle-rowspan"></td>
<td nowrap>18:30</td>
<td class=" teams" nowrap>DNRWL</td>
<td class=" teams" nowrap>TSSV Bottrop</td>
<td class=" teams highlightcell" nowrap>DJK Borussia Münster</td>
</tr>
<tr>
<td nowrap>So.</td>
<td nowrap>09.10.2016</td>
<td nowrap>10:00</td>
<td class=" teams" nowrap>HNRWL</td>
<td class=" teams" nowrap>GSV Fröndenberg</td>
<td class=" teams highlightcell" nowrap>DJK Borussia Münster</td>
</tr>
</tbody>
</table>
</div>
</body>Upvotes: 2
Quentin
Reputation: 944064
Just stop giving elements the wrong display properties:
Get rid of:
tbody {
display: block;
Get rid of:
thead {
display: table;
Upvotes: 1
Related Questions
- HTML table header/row alignment
- How to align TH Header with TD in TBody
- Spacing between thead and tbody
- Fixed columns not working - thead, tbody, tfoot
- How can I style the thead and tbody for this page?
- How to align two columns in HTML
- Columns not matching between thead and tbody
- <thead><th> and <tbody><td> not lining up
- HTML: tbody columns first look the order of thead columns and then display
- How do I align columns in thead and tbody when tbody css display attribute is block