Html 无法设置固定宽度的表格标题

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

HTML

---

您可以将表格的标题元素放在

标记中，将可滚动部分放在

中。然后设置

的高度，并将其设置为

overflow-y:scroll

---

有关此问题的更多信息：

这不是执行固定标题的正确方法。可能重复此操作：

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

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