具有两个表的表固定头在tbody上的滚动条具有对齐问题

时间：2019-01-09 07:43:15

标签： html css html-table

我添加了两个表，使thead部分固定在顶部。 表（tbody）中的内容来自数据库。因此，行数可以具有较小或较大的行数。

考虑此代码。

如果tbody的行很少：

.tables {
  padding: 20px;
}

table {
  border: 1px solid #ddd;
  text-align: left;
  font-family: sans-serif;
  font-size: 13px;
}

table th,
table td {
  border: 1px solid #ddd;
  padding: 2px 5px;
}

.table-head table thead tr th:last-child {
  width: 15%;
}

.tables .table-body {
  max-height: 200px;
  overflow-y: auto;
}

.table-body table tbody tr td:last-child {
  width: 15%;
}

.table-body::-webkit-scrollbar {
  width: 10px;
  margin-right: -10px;
  position: absolute;
  height: 100%;
  right: -10px;
}

.table-body::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.table-body::-webkit-scrollbar-thumb {
  background: #888;
}

.tbl-fieldList .tbl-body-only::-webkit-scrollbar-thumb:hover {
  background: #555;
}
<div class="tables">
  <div class="table-head">
    <table width="100%" cellpadding="0" cellspacing="0" border="0">
      <thead>
        <tr>
          <th>Name</th>
          <th><input type="checkbox"></th>
        </tr>
      </thead>
    </table>
  </div>

  <div class="table-body">
    <table width="100%" cellpadding="0" cellspacing="0" border="0">
      <tbody>
        <tr>
          <td>Sample name</td>
          <td><input type="checkbox"></td>
        </tr>
        <tr>
          <td>Sample name</td>
          <td><input type="checkbox"></td>
        </tr>
        <tr>
          <td>Sample name</td>
          <td><input type="checkbox"></td>
        </tr>
        <tr>
          <td>Sample name</td>
          <td><input type="checkbox"></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

如果tbody具有大量行，则表th和td的对齐方式会失真：

.tables {
  padding: 20px;
}

table {
  border: 1px solid #ddd;
  text-align: left;
  font-family: sans-serif;
  font-size: 13px;
}

table th,
table td {
  border: 1px solid #ddd;
  padding: 2px 5px;
}

.table-head table thead tr th:last-child {
  width: 15%;
}

.tables .table-body {
  max-height: 200px;
  overflow-y: auto;
}

.table-body table tbody tr td:last-child {
  width: 15%;
}

.table-body::-webkit-scrollbar {
  width: 10px;
  margin-right: -10px;
  position: absolute;
  height: 100%;
  right: -10px;
}

.table-body::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.table-body::-webkit-scrollbar-thumb {
  background: #888;
}

.tbl-fieldList .tbl-body-only::-webkit-scrollbar-thumb:hover {
  background: #555;
}
<div class="tables">
  <div class="table-head">
    <table width="100%" cellpadding="0" cellspacing="0" border="0">
      <thead>
        <tr>
          <th>Name</th>
          <th><input type="checkbox"></th>
        </tr>
      </thead>
    </table>
  </div>

  <div class="table-body">
    <table width="100%" cellpadding="0" cellspacing="0" border="0">
      <tbody>
        <tr>
          <td>Sample name</td>
          <td><input type="checkbox"></td>
        </tr>
        <tr>
          <td>Sample name</td>
          <td><input type="checkbox"></td>
        </tr>
        <tr>
          <td>Sample name</td>
          <td><input type="checkbox"></td>
        </tr>
        <tr>
          <td>Sample name</td>
          <td><input type="checkbox"></td>
        </tr>
        <tr>
          <td>Sample name</td>
          <td><input type="checkbox"></td>
        </tr>
        <tr>
          <td>Sample name</td>
          <td><input type="checkbox"></td>
        </tr>
        <tr>
          <td>Sample name</td>
          <td><input type="checkbox"></td>
        </tr>
        <tr>
          <td>Sample name</td>
          <td><input type="checkbox"></td>
        </tr>
        <tr>
          <td>Sample name</td>
          <td><input type="checkbox"></td>
        </tr>
        <tr>
          <td>Sample name</td>
          <td><input type="checkbox"></td>
        </tr>
        <tr>
          <td>Sample name</td>
          <td><input type="checkbox"></td>
        </tr>
        <tr>
          <td>Sample name</td>
          <td><input type="checkbox"></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

我试图将自定义滚动条的位置移到div的外部，但是它不起作用。有人有解决此问题的想法吗？

1 个答案:

答案 0 :(得分：1)

您需要将自定义滚动添加到“表头”，然后添加几行JavaScript：）

if (document.querySelector('.table-body table').offsetHeight > 200) { // same as max-height
    document.querySelector('.table-head').style.overflowY = 'scroll';
}
.tables {
  padding: 20px;
}

table {
  border: 1px solid #ddd;
  text-align: left;
  font-family: sans-serif;
  font-size: 13px;
}

table th,
table td {
  border: 1px solid #ddd;
  padding: 2px 5px;
}

.table-head table thead tr th:last-child {
  width: 15%;
}

.tables .table-body {
  max-height: 200px;
  overflow-y: auto;
}

.table-body table tbody tr td:last-child {
  width: 15%;
}

.table-body::-webkit-scrollbar,
.table-head::-webkit-scrollbar {
  width: 10px;
  margin-right: -10px;
  position: absolute;
  height: 100%;
  right: -10px;
}

.table-body::-webkit-scrollbar-track,
.table-head::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.table-body::-webkit-scrollbar-thumb {
  background: #888;
}

.tbl-fieldList .tbl-body-only::-webkit-scrollbar-thumb:hover {
  background: #555;
}
<div class="tables">
  <div class="table-head">
    <table width="100%" cellpadding="0" cellspacing="0" border="0">
      <thead>
        <tr>
          <th>Name</th>
          <th><input type="checkbox"></th>
        </tr>
      </thead>
    </table>
  </div>

  <div class="table-body">
    <table width="100%" cellpadding="0" cellspacing="0" border="0">
      <tbody>
        <tr>
          <td>Sample name</td>
          <td><input type="checkbox"></td>
        </tr>
        <tr>
          <td>Sample name</td>
          <td><input type="checkbox"></td>
        </tr>
        <tr>
          <td>Sample name</td>
          <td><input type="checkbox"></td>
        </tr>
        <tr>
          <td>Sample name</td>
          <td><input type="checkbox"></td>
        </tr>
        <tr>
          <td>Sample name</td>
          <td><input type="checkbox"></td>
        </tr>
        <tr>
          <td>Sample name</td>
          <td><input type="checkbox"></td>
        </tr>
        <tr>
          <td>Sample name</td>
          <td><input type="checkbox"></td>
        </tr>
        <tr>
          <td>Sample name</td>
          <td><input type="checkbox"></td>
        </tr>
        <tr>
          <td>Sample name</td>
          <td><input type="checkbox"></td>
        </tr>
        <tr>
          <td>Sample name</td>
          <td><input type="checkbox"></td>
        </tr>
        <tr>
          <td>Sample name</td>
          <td><input type="checkbox"></td>
        </tr>
        <tr>
          <td>Sample name</td>
          <td><input type="checkbox"></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

相关问题
最新问题