<div class="scrollable">
<table>
<thead>
<tr>
<th class="nothing_here">Nothing here</th>
<th>Tora Gargano</th>
<th>Emory Beck</th>
<th>Jane Doe</th>
<th>Yoshiko Beekman</th>
<th>Treasa Norris</th>
<th>Jane Doe</th>
</tr>
</thead>
<tbody>
<tr>
<th>Actions</th>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
</tr>
<tr>
<th>Status</th>
<td>Pending</td>
<td>Done</td>
<td>Pending</td>
<td>Pending</td>
<td>Done</td>
<td>Pending</td>
</tr>
<tr>
<th>Actions</th>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
</tr>
<tr>
<th>Status</th>
<td>Pending</td>
<td>Done</td>
<td>Pending</td>
<td>Pending</td>
<td>Done</td>
<td>Pending</td>
</tr>
</tbody>
</table>
</div>
thead元素中的名称与下面的值没有正确对齐。 th元素的第一个孩子占用了所有可用空间。
以下是我的问题jsfiddle的链接http://jsfiddle.net/zLc48uga/有什么想法吗？
答案 0 :(得分：1)
如果从css中删除“display：block”，所有这些都排好了。你是这个意思吗？该表需要显示：table-cell，否则磁头不能与数据对齐。
<强> 修改
对不起，我误解了。也可以向你的thead添加显示块。
.scrollable thead {
display: block;
}
答案 1 :(得分：0)
此问题的解决方案是将thead元素设为block元素。
要实现此目的，您需要应用以下CSS：
.scrollable thead {
display: block;
}
答案 2 :(得分：0)
我认为您尝试做的是设置标题固定，并使主体可滚动。
有几种方法可以做到这一点，但这并不是一个好方法。 一种方式，跨浏览器，可以使用两个不同的表：一个用于头部，另一个用于身体，并将身体表放在固定高度div中。
例如：
<table>
<tr>
<th class="nothing_here">Nothing here</th>
<th>Tora Gargano</th>
<th>Emory Beck</th>
<th>Jane Doe</th>
<th>Yoshiko Beekman</th>
<th>Treasa Norris</th>
<th>Jane Doe</th>
</tr>
</table>
<div class="scrollable">
<table>
<tr>
<th>Actions</th>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
</tr>
<tr>
<th>Actions</th>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
</tr>
<tr>
<th>Actions</th>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
</tr>
</table>
</div>
您可以在此处找到该案例的演示：Demo
我建议您使用DataTables，这是一个使用javascript的简单明了的解决方案。
答案 3 :(得分：0)
如果你真的想要将该表拆开以添加滚动，那么你可以这样做：
html {
overflow-y:hidden;
}
.scrollable thead tr {
position: relative;
display: block;
}
.scrollable thead th {
position: relative;
display: inline-block;
margin-left: 6px;
}
.scrollable tbody {
display: block;
height: 100px;
overflow-y: scroll;
}
.scrollable tbody td, .scrollable tbody th {
position: relative;
text-align: center;
width: 80px;
}<div class="scrollable">
<table>
<thead>
<tr>
<th class="nothing_here">Nothing here</th>
<th>Tora Gargano</th>
<th>Emory Beck</th>
<th>Jane Doe</th>
<th>Yoshiko Beekman</th>
<th>Treasa Norris</th>
<th>Jane Doe</th>
</tr>
</thead>
<tbody>
<tr>
<th>Actions</th>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
</tr>
<tr>
<th>Status</th>
<td>Pending</td>
<td>Done</td>
<td>Pending</td>
<td>Pending</td>
<td>Done</td>
<td>Pending</td>
</tr>
<tr>
<th>Actions</th>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
</tr>
<tr>
<th>Status</th>
<td>Pending</td>
<td>Done</td>
<td>Pending</td>
<td>Pending</td>
<td>Done</td>
<td>Pending</td>
</tr>
<tr>
<th>Actions</th>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
</tr>
<tr>
<th>Status</th>
<td>Pending</td>
<td>Done</td>
<td>Pending</td>
<td>Pending</td>
<td>Done</td>
<td>Pending</td>
</tr>
<tr>
<th>Actions</th>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
</tr>
<tr>
<th>Status</th>
<td>Pending</td>
<td>Done</td>
<td>Pending</td>
<td>Pending</td>
<td>Done</td>
<td>Pending</td>
</tr>
</tbody>
</table>
</div>