如何排列thead和tbody列？

时间：2016-09-29 13:35:11

标签： html css

我终于设法修复了thead并使tbody可滚动，但我无法弄清楚如何对齐列。

我只希望能够垂直滚动tbody，并且如果需要的话，同时将它们固定在顶部和水平方向上。

我不认为滚动条是问题，你可以在这里看到：

请注意蓝色的宽度与绿色不同。如果我将整行的宽度调整一个固定的数量，那么差异仍然存在。

如果可能的话，获得100％的CSS解决方案会很酷。

我的表格如下：

＆＃13;
＆＃13; 
/*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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：2)

您不应将thead设为display: table;，将tbody设为display: block;

尝试删除这些属性。

修改：如果您想保持最大高度，请将max-height放在#club_plan上。 注意：如果希望tbody的高度最大为150px，请将thead高度添加到最大高度。

/*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

答案 1 :(得分：1)

停止为元素提供错误的显示属性：

摆脱：

tbody {
    display: block;

摆脱：

thead {
    display: table;

答案 2 :(得分：1)

将width: 150px; height: 30px; display: inline-block;添加到 td， 然后将white-space: nowrap;添加到表格

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

相关问题
最新问题