无法设置宽度固定表头答案

【问题标题】：Cannot set width fixed table header无法设置宽度固定表头
【发布时间】：2014-08-25 16:24:22
【问题描述】：

我想要一个固定的表头。如果表格滚动，表格标题将保持在顶部。不幸的是，它丢失了宽度信息。我该如何改进桌子？

HTML

<div class="wrap">
<table>
    <tbody>
        <tr>
            <td>From</td>
            <td>Subject</td>
            <td>Date</td>
        </tr>
        <tr>
            <td>Peter Pan</td>
            <td>Apple</td>
            <td>30.06.2014</td>
        </tr>
        <tr>
            <td>Lisa Lama</td>
            <td>Banana</td>
            <td>10.03.2013</td>
        </tr>
        <tr>
            <td>Steven</td>
            <td>Tuba</td>
            <td>12.01.2013</td>
        </tr>
    </tbody>
</table>

CSS

.wrap{
    border: 4px solid lightgrey;
    height: 100px;
    width: 470px;
    overflow: auto;
}

table{
    width: 400px;
}

table tr:first-child{
    background: lightgrey;
    border: 1px solid;
    position: fixed;

}

td{   
    padding: 20px;
}

【问题讨论】：

不是固定标题的正确方法。
Table with fixed header and column on pure css的可能重复
试试这个：jsfiddle.net/TheBanana/2TyLg/2

标签： html css

【解决方案1】：

您可以将表格的标题元素放在<thead> 标记中，将可滚动部分放在<tbody> 中。然后设置<tbody>的高度，给overflow-y: scroll

此问题的更多信息：Is there a direct purpose for HTML's tbody?

【讨论】：