html - 无法设置宽度固定表头

Question

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

js fiddle

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;
}

Answer 1

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

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