无法设置宽度固定表头

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?