时间戳

首页 > 解决方案 > 固定表头没有和列对齐

html - 固定表头没有和列对齐

问题描述

我有一个包含三个表格的页面，但是一个表格有很多数据，我决定为表格设置一个固定的标题。固定标题可以工作，但 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>

附上它现在的样子。我不想为每个元素添加自定义宽度，因为我的实际表格有很多列。 这是它目前的样子（不是实际数据）

标签： htmlcss

解决方案

您明确告诉它使用“显示：块；” 在你的 CSS 中，所以告诉浏览器不要像表格一样布置它。

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

推荐阅读