CODEWITHSUNDEEP
htmlcsshtml-table
vishnu
vishnu

Reputation: 2948

Table fixed head with two tables have alignment issue with scrollbar on tbody

I have added two tables to make thead section as fixed on the top. The contents in the table (tbody) comes from database. So, the number of rows may have small or large number of rows.

Consider this code.

If tbody have few rows:

.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>

If tbody has large number of rows, the alignment of the table th and td gets distorted:

.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>

I have tried to make the custom scroll bar position to outside of the div, but it is not working. Anybody have an idea to solve this problem?

Upvotes: 1

Views: 46

Answers (1)

Daut
Daut

Reputation: 2645

You need to add the custom scroll to 'table-head' and then add few lines of 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>

Upvotes: 1

Related Questions