代码之家 › 专栏 › 技术社区 › oneMoreDeveloper

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

css html

oneMoreDeveloper · 技术社区 · 5 年前

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