修复'thead'宽度与'tbody'宽度不匹配

Question

我有一个已修复<thead>的表格，但其中的每个<th>都与<td>中相应列的宽度<tbody>不匹配）。

如果您需要更多信息，请问我。提前谢谢。

编辑：这是jsfiddle

Answer 1

将table-layout:fixed添加到表格并display:table添加到thead可以解决您的问题。

修改后的CSS：

table thead {
  display:table;
  width: 100%;
  background-color: lightblue;
  position: fixed;
}
table{
  table-layout:fixed;
}

虽然这是一个草率的修复，因为table-layout:fixed影响整个布局，可能看起来不像你想要的那样。

您还可以在列上设置百分比宽度，而不是使用table-layout:fixed来更好地控制布局。