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;
}

似乎我不能同时拥有两者：

如果选择http://jsfiddle.net/jd72op9n/4/我会得到一个固定标题，但th和td的列不一样。
如果我删除＆＃34; display：block＆＃34;，我会得到正确的列但不是固定标题。

你有解决办法来解决这两个问题吗？

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;
}

Answer 2

http://jsfiddle.net/patelnirpendra/2bs886p0/

css：

table tbody,table thead {
  display: block;
}

table{
    border: 1px solid black;
    table-layout: fixed;
}

th, td {
    border: 1px solid black;
    overflow: hidden;
    width: 150px;
}

CSS表：固定标题和相同的列宽为

2 个答案: