html - CSS 表 : fixed header and same column width for and

Question

我想要一个纯 CSS 解决方案，它具有固定的表头和相同的列宽 <th>和 <td>内容不同。我举了一个例子并对其进行了修改以获取具有不同内容的列:http://jsfiddle.net/jd72op9n/4/

table tbody,table thead {
  display: block; /* comment to get same column with*/
}
table tbody {
  overflow: auto;
  height: 100px;
}

看来我不能同时拥有:

1. 如果取http://jsfiddle.net/jd72op9n/4/我得到一个固定的标题，但 th 和 td 的列不一样。
2. 如果我删除“显示: block ”，我会得到正确的列，但不是固定的标题。

您是否有同时获得两者的解决方案？

Answer 1

我想唯一的方法是像这样严格指定单元格的宽度:

table th, table td{
  width: 80px;
}
tbody{
  width: 100%;
  margin-right: 20px;
}

请试试这个fiddle

如果你想改变特定单元格的宽度，例如第 4 个长文本，你可以添加这个 css 规则:

th:nth-child(4), td:nth-child(4){
  width: 120px;
}