How do line up thead and tbody columns?

Question

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>

You need to post a [mcve] in your question, not part of it here and the rest of it somewhere else. — j08691, Sep 29 '16 at 13:37
Possible duplicate of [HTML table with 100% width, with vertical scroll inside tbody](http://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody) — hungerstar, Sep 29 '16 at 13:41
@hungerstar I tried that already (pur css 100%width solution) and I couldnt get it working. I dont even know if that does what I want. — Tweakimp, Sep 29 '16 at 13:45
@Tweakimp I'm not sure there's a 100% bulletproof way to do it with CSS only and actual table elements. At least not without your CSS becoming very tedious → making adjustments for each browser's scrollbar width, minor width adjustments to each header cell, etc. How do you not know that it will do what you want? It has a demo. — hungerstar, Sep 29 '16 at 13:55
Its not the scrollbar that makes the difference: https://i.imgur.com/4fR2hq5.jpg 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. — Tweakimp, Sep 29 '16 at 13:58
@Tweakimp don't you want the column widths to line up between the `thead` and `tbody`? See [this JSFiddle](http://jsfiddle.net/hashem/CrSpu/554/). If so, then the vertical scrollbar does make a difference when present. — hungerstar, Sep 29 '16 at 13:59
Yes, I do want the columns to line up. Yes, the vertical scrollbar will make a difference. But the difference in the image I linked seems to not result from the scrollbar, I think it comes from the different widths of the cells. — Tweakimp, Sep 29 '16 at 14:02

Cladiuss · Answer 1 · 2016-09-29T13:50:25.213

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>

Fiddle

I cant tell if this is a proper solution because you removed the height limit. — Tweakimp, Sep 29 '16 at 13:44
I edited my answer, the max-height was applied on the `tbody`, as it is not displayed as a `block` anymore, it won't use that property. — Cladiuss, Sep 29 '16 at 13:51
You edited your answer. It looks like this now: https://jsfiddle.net/amwokx66/10/ The height limit is now applied, but the thead is not fixed any more. — Tweakimp, Sep 29 '16 at 13:52

score 1 · Answer 2 · answered Sep 29 '16 at 13:42

1

Just stop giving elements the wrong display properties:

Get rid of:

tbody {
    display: block;

Get rid of:

thead {
    display: table;

answered Sep 29 '16 at 13:42

Quentin

914,110
126
1,211
1,335

So what do I put there instead? Nothing? – Tweakimp Sep 29 '16 at 13:44
Yes. Hence "get rid of". – Quentin Sep 29 '16 at 13:45
If I do that, it looks like this: https://jsfiddle.net/tweakimp/amwokx66/12/ The height limit is not applied and I cant even tell if the thead is fixed any more. – Tweakimp Sep 29 '16 at 13:46

score 1 · Answer 3 · answered Sep 29 '16 at 15:35

1

Add width: 150px; height: 30px; display: inline-block; to td, th then add white-space: nowrap; to table

https://jsfiddle.net/amwokx66/17/

answered Sep 29 '16 at 15:35

FrydrykChopin

56
3

Best answer so far, as the table is still able to scroll, but the fixed widths just dont look good. :( – Tweakimp Sep 29 '16 at 21:27
is there a solution without fixing the column widths? – Tweakimp Oct 08 '16 at 09:03

How do line up thead and tbody columns?

3 Answers3