如何在不使用thead标签的情况下在html中修复表头？

Question

我有下表没有thead：

    <table>
     <tbody>
      <tr class="header">
       <th>Head 1</th>
       <th>Head 2</th>
       <th>Head 3</th>
      </tr>
      <tr>
       <td>body</td>
       <td>body</td>
       <td>body</td>
      </tr>
      <tr>
       <td>body</td>
       <td>body</td>
       <td>body</td>
      </tr>
      <tr>
       <td>body</td>
       <td>body</td>
       <td>body</td>
      </tr>
     </tbody>
    </table>

CSS:

.table tr td {
    overflow-y: auto    
}
.table tr.header th {
    display: block;
}

那么如何修复上表中的表头。

Answer 1

解决方案是将主体设为display: block，然后就可以使用overflow: auto。但是您希望.header不要与其他<tr>一起滚动，因此您需要移出.header。

如果您可以接受.header移出<tbody>，我已更新了我的jsFiddle。

jsfiddle

.fixed_headers td:nth-child(1),
.fixed_headers th:nth-child(1) {
  min-width: 200px;
}
.fixed_headers td:nth-child(2),
.fixed_headers th:nth-child(2) {
  min-width: 200px;
}
.fixed_headers td:nth-child(3),
.fixed_headers th:nth-child(3) {
  width: 350px;
}
.fixed_headers {
    width: 750px;
    border-collapse: collapse;
}
.fixed_headers th, .fixed_headers td {
    padding: 5px;
    text-align: left;
}
.fixed_headers .header {
    background-color: #333333;
    color: #fdfdfd;
}
.fixed_headers tr
{
    display: block;
}
.fixed_headers tbody:last-of-type{
    position: relative;
    display: block;
    overflow: auto;
    width: 100%;
    height: 300px;
}