html - 无法对齐 html 标题和 td 单元格

Question

我正在尝试制作一个小表格，当标题下有许多 tr 标签时可以滚动。我已经设法让它只在一列上正常工作，但我正在努力让它与一列以上的列一起工作，因为列不对齐。重要的是表格的大小保持不变，因为我使用 jQuery 和自动滚动添加新行。

我只希望 thead 和 tbody 的列对齐...

这是我到目前为止所拥有的：

.grid_background_comm {
  background-color: rgb(173, 173, 173);
  padding: 0px;
  margin-left: 10px;
  margin-right: 10px;
  width: 950px;
  height: 90px;
}

.grid_background_comm thead {
  display: block;
  text-align: left;
  width: 950px;
}

.grid_background_comm th {
  padding-left: 4px;
  width: 950px;
}

.grid_comm {
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  text-align: left;
  width: 950px;
  height: 85px;
}

.grid_comm tr {
  background-color: rgb(231, 231, 231);
  display: block;
  width: 935px;
  margin-left: 3px;
  margin-right: 10px;
  padding-left: 4px;
  padding-right: 4px;
}

.grid_header {
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(44, 44, 44);
  padding: 0px;
  margin: 0px;
  width: 960px;
  height: 20px;
}

<table id="table_comm" class="grid_background_comm">
  <thead>
    <th id="1" class='grid_header'>Line</th>
    <th id="2" class='grid_header'>I/O</th>
  </thead>
  <tbody id="gv_comm_data" class="grid_comm">
    <tr>
      <td headers="1">01</td>
      <td headers="2">02</td>
    </tr>
  </tbody>
</table>

标签： htmlcss

Answer 1

display:block 附加到 thead 和 tr ，这会影响它们的默认行为。您可以删除它们 https://codepen.io/rohinikumar4073/pen/zYGKqZL

.grid_background_comm {
  background-color: rgb(173, 173, 173);
  padding: 0px;
  margin-left: 10px;
  margin-right: 10px;
  width: 950px;
  height: 90px;
}

.grid_background_comm thead {
  text-align: left;
  width: 950px;
}

.grid_background_comm th {
  padding-left: 4px;
  width: 950px;
}

.grid_comm {
  overflow-y: auto;
  overflow-x: hidden;
  text-align: left;
  width: 950px;
  height: 85px;
}

.grid_comm tr {
  background-color: rgb(231, 231, 231);
  width: 935px;
  margin-left: 3px;
  margin-right: 10px;
  padding-left: 4px;
  padding-right: 4px;
}

.grid_header {
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(44, 44, 44);
  padding: 0px;
  margin: 0px;
  width: 960px;
  height: 20px;
}

<table id="table_comm" class="grid_background_comm">
  <thead>
    <tr>
    <th id="1" class='grid_header'>Line</th>
    <th id="2" class='grid_header'>I/O</th>
    </tr>
  </thead>
  <tbody id="gv_comm_data" class="grid_comm">
    <tr>
      <td headers="1">01</td>
      <td headers="2">02</td>
    </tr>
    <tr>
      <td headers="1">01</td>
      <td headers="2">02</td>
    </tr>
     <tr>
      <td headers="1">01</td>
      <td headers="2">02</td>
    </tr>
     <tr>
      <td headers="1">01</td>
      <td headers="2">02</td>
    </tr>
  </tbody>
</table>