Question

我正在使用以下CSS将表格列标题保留在页面顶部：

table thead tr {
        display: block;
}

table tbody {
        display: block;
        height: 75px;
        overflow: auto;
}

我能弄清楚的是，为什么表格只显示2行（取决于行的内容高度）。

如果我在table tbody下调整高度，则标题将进一步下降，从而在页面顶部和标题的开头之间留出一个空白（显然，我不想这样做）。

希望这是一个简单的过程，因为我正在拔头发...而且剩余的空间不多。

编辑

这是相关的标记（我必须使其通用）。一共有30列，约有1200行。

<!doctype html>
<html>
<head>

<style type="text/css">

table thead tr {
        display: block;
}

table tbody {
        display: block;
        height: 75px;
        overflow: auto;
}
</style>

</head>

<body>

<table width="190%" border="1" cellpadding="6" style="border-collapse: collapse">
                <thead>
                        <th>COLUMN  1</th>
                        <th>COLUMN  2</th>
                        <th>COLUMN  3</th>
                        <th>COLUMN  4</th>
                        <th>COLUMN  5</th>
                        <th>COLUMN  6</th>
                        <th>COLUMN  7</th>
                        <th>COLUMN  8</th>
                        <th>COLUMN  9</th>
                        <th>COLUMN 10</th>
                        <th>COLUMN 11</th>
                        <th>COLUMN 12</th>
                        <th>COLUMN 13</th>
                        <th>COLUMN 14</th>
                        <th>COLUMN 15</th>
                        <th>COLUMN 16</th>
                        <th>COLUMN 17</th>
                        <th>COLUMN 18</th>
                        <th>COLUMN 19</th>
                        <th>COLUMN 20</th>
                        <th>COLUMN 21</th>
                        <th>COLUMN 22</th>
                        <th>COLUMN 23</th>
                        <th>COLUMN 24</th>
                        <th>COLUMN 25</th>
                        <th>COLUMN 26</th>
                        <th>COLUMN 27</th>
                        <th>COLUMN 28</th>
                        <th>COLUMN 29</th>
                        <th>COLUMN 30</th>
                </thead>
                <tbody>
                        <tr>
                                <td>ROW 01</td>
                                <td>ROW 01</td>
                                <td>ROW 01</td>
                        </tr>
                        <tr>
                                <td>ROW 02</td>
                                <td>ROW 02</td>
                                <td>ROW 02</td>
                        </tr>
                        <tr>
                                <td>ROW 03</td>
                                <td>ROW 03</td>
                                <td>ROW 03</td>
                        </tr>
                        <tr>
                                <td>ROW 04</td>
                                <td>ROW 04</td>
                                <td>ROW 04</td>
                        </tr>
                        <tr>
                                <td>ROW 05</td>
                                <td>ROW 05</td>
                                <td>ROW 05</td>
                        </tr>
                        <tr>
                                <td>ROW 06</td>
                                <td>ROW 06</td>
                                <td>ROW 06</td>
                        </tr>
                        <tr>
                                <td>ROW 07</td>
                                <td>ROW 07</td>
                                <td>ROW 07</td>
                        </tr>
                        <tr>
                                <td>ROW 08</td>
                                <td>ROW 08</td>
                                <td>ROW 08</td>
                        </tr>
                        <tr>
                                <td>ROW 09</td>
                                <td>ROW 09</td>
                                <td>ROW 09</td>
                        </tr>
                        <tr>
                                <td>ROW 10</td>
                                <td>ROW 10</td>
                                <td>ROW 10</td>
                        </tr>
                </tbody>
                </table>

</body>
</html>

我还要附上我所得到的图像。需要扩大底行（用箭头突出显示）以覆盖页面的较大区域。

Answer 1

它实际上不必太复杂。从表元素中删除display: block。这不是必需的。用户代理已经将自己的样式应用于这些样式，以使其表现得像表。

table thead tr {
}

table tbody {
  height: 75px;
  overflow: auto;
}

Answer 2

这是对我有用的东西：

table thead tr {
        display: block;
}

table tbody {
        display: block;
        overflow: auto;
        height: 700px;
}

请注意，height元素在table tbody元素的最后列出。不知道为什么要考虑这样做，但是一旦更改订单，身高就会按照我想要的方式做出反应。

CSS固定标头仅显示2行

2 个答案: