我正在尝试创建具有固定行标题的表格(因此在滚动列标题期间保持不变)，我已经能够实现但现在表格标题未对齐 到下面的行。我还创建了一个 jsfiddle为了那个原因。 目前的输出是这样的:
这是提取的 HTML 示例。
<head>
<style>
table
{
/*background-color: #aaa;*/
width: 800px;
}
tbody
{
/*background-color: #ddd;*/
height: 200px;
width: 800px;
overflow: auto;
}
td
{
}
thead > tr, tbody
{
display: block;
}
</style>
</head>
<body>
<div id="containerdiv" style="width: 800px">
<table id="dynamictable">
<thead>
<tr>
<th>
ID
</th>
<th>
Title
</th>
<th>
Media Title
</th>
<th>
Broadcast Time
</th>
<th>
Destination
</th>
<th>
Channel
</th>
<th>
Start Time
</th>
<th>
End Time
</th>
</tr>
</thead>
<tbody id="tablebody">
<tr id="0">
<td>
ID: 0
</td>
<td>
Some Content
</td>
<td>
Some more contents
</td>
<td>
Some more contents contents contents
</td>
<td>
Some more contents contents contents
</td>
<td>
Some more contents contents contents
</td>
<td>
Some more contents contents contents
</td>
<td>
Some more contents contents contents
</td>
</tr>
<tr id="1">
<td >
ID: 1
</td>
<td>
Some Content
</td>
<td>
Some more contents
</td>
<td>
Some more contents contents contents
</td>
<td>
Some more contents contents contents
</td>
<td>
Some more contents contents contents
</td>
<td>
Some more contents contents contents
</td>
<td>
Some more contents contents contents
</td>
</tr>
<tr id="Tr1">
<td>
ID: 1
</td>
<td>
Some Content
</td>
<td>
Some more contents
</td>
<td>
Some more contents contents contents
</td>
<td>
Some more contents contents contents
</td>
<td>
Some more contents contents contents
</td>
<td>
Some more contents contents contents
</td>
<td>
Some more contents contents contents
</td>
</tr>
</tbody>
</table>
</div>
</body>
最佳答案
不要设置 thead > tr, tbody显示: block 。如果您删除该行，它应该可以工作。
默认情况下，<tbody>有display:table-row-group和 <tr>有display:table-row .您希望将其保留为这些默认值。
关于html - 将表格标题与行对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18600537/