固定的标题表没有对齐的<thead>和<tbody>列

Question

我有一个包含三个表的页面，但是一个表有很多数据，因此我决定为该表设置一个固定的标题。固定的标题起作用，但是thead和tbody列未对齐，换句话说，标题列的宽度与tbody中的列不匹配。任何帮助，将不胜感激。

table {
  border-collapse: collapse;
  border-width: 1px 1px 1px 1px;
  border-style: solid;
}

table td {
  border-width: 1px 1px 1px 1px;
  border-style: solid;
  padding: 4px;
  text-align: left;
}

table th {
  border-width: 1px 1px 1px 1px;
  background-color: lightgray;
  border-style: solid;
  padding: 4px;
}

.fixed_header {
  border-collapse: collapse;
  border-width: 1px 1px 1px 1px;
  border-style: solid;
}

.fixed_header tbody {
  display: block;
  overflow: auto;
  height: 500px;
}

.fixed_header thead tr {
  display: block;
}

<table class="fixed_header">
  <thead>
    <tr>
      <th>COLUMN 1</th>
      <th>COLUMN 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> data for column 1</td>
      <td> data for column 2</td>
    </tr>
  </tbody>
</table>

附加现在的外观。我不想为每个元素添加自定义宽度，因为我的实际表有很多列。

Answer 1

您要明确告诉它使用“ display：block;”在您的CSS中，因此告诉浏览器不要像桌子一样布置它。

我认为您将需要使用更复杂的东西，例如jQuery Datatables FixedHeader，它可以计算所有内容的宽度，并正确处理。