Question

第一个表是固定的，当第二个表向下滚动时，它会保留在视图中。如何使这两个表对齐？

#index_table,
#index_table_header {
  text-align: left;
  margin: 20px;
  margin: 0 auto;
  table-layout: fixed;
}

#index_table,
#index_table_header {
  width: 800px;
}

#index_table {
  display: block;
  height: 390px;
  overflow-y: scroll;
}

#index_table_header td {
  padding: 10px 8px;
  width: 100px;
  border: 1px solid black;
}

#index_table td {
  padding: 10px 8px;
  width: 100px;
  border: 1px solid black;
}

#index_table td:nth-child(1),
#index_table_header td:nth-child(1) {
  width: 80px;
}

#index_table td:nth-child(3),
#index_table_header td:nth-child(3) {
  width: 70px;
}

#index_table td:nth-child(5),
#index_table_header td:nth-child(5) {
  width: 200px;
}

#index_table td:nth-child(2),
#index_table_header td:nth-child(2) {
  width: 250px;
}

<table id="index_table_header">
  <thead>
    <tr>
      <td>ID</td>
      <td>Item</td>
      <td>Amount</td>
      <td>Added</td>
      <td>Nutritional Value ID</td>
      <td>Actions</td>
    </tr>
  </thead>
</table>
<table id="index_table">
  <tbody>
    <tr>
      <td>395</td>
      <td>chicken liver</td>
      <td>0.37</td>
      <td>2019-10-14</td>
      <td>67</td>
      <td>
        <a href="/delete/395">Delete</a>
        <br>
        <a href="/update/395">Update</a>
      </td>
    </tr>
</table>

需要考虑的几件事

我需要表格和表格单元格（列）准确对齐
第二个表实际上有数百行，我希望它可以滚动，并且我不想让标题不可见，这就是为什么我有两个表并且不想合并到一个表的原因。

Answer 1

您可以使用此代码

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <title>Hello, world!</title>
  <style type="text/css">
    body {
      margin: 0;
    }
    
    .table-scroll {
      position: relative;
      max-width: 600px;
      margin: auto;
      overflow: hidden;
      border: 1px solid #000;
    }
    
    .table-wrap {
      width: 100%;
      overflow: auto;
    }
    
    .table-scroll table {
      width: 100%;
      margin: auto;
      border-collapse: separate;
      border-spacing: 0;
    }
    
    .table-scroll th,
    .table-scroll td {
      padding: 5px 10px;
      border: 1px solid #000;
      background: #fff;
      white-space: nowrap;
      vertical-align: top;
    }
    
    .table-scroll thead,
    .table-scroll tfoot {
      background: #f9f9f9;
    }
    
    .clone {
      position: absolute;
      top: 0;
      left: 0;
      pointer-events: none;
    }
    
    .clone th,
    .clone td {
      visibility: hidden
    }
    
    .clone td,
    .clone th {
      border-color: transparent
    }
    
    .clone tbody th {
      visibility: visible;
      color: black;
    }
    
    .clone .fixed-side {
      border: 1px solid #000;
      background: #eee;
      visibility: visible;
    }
    
    .clone thead,
    .clone tfoot {
      background: transparent;
    }
    
    .red {
      background-color: red;
      border-radius: 10px;
      color: white;
      padding: 2px 10px;
      text-decoration: none;
      outline: none;
    }
    
    .green {
      background-color: green;
      border-radius: 10px;
      color: white;
      padding: 3px 10px;
      text-decoration: none;
      outline: none;
    }
  </style>
</head>

<body>
  <div id="table-scroll" class="table-scroll">
    <div class="table-wrap">
      <table class="main-table">
        <thead>
          <tr>
            <th class="fixed-side" scope="col">ID</th>
            <th scope="col">Item</th>
            <th scope="col">Amount</th>
            <th scope="col">Added</th>
            <th scope="col">Nutritional Value ID</th>
            <th scope="col">Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th class="fixed-side">395</th>
            <td>chicken liver</td>
            <td>0.37</td>
            <td>2019-10-14</td>
            <td>67</td>
            <td>
              <a class="red" href="/delete/395">Delete</a>
              <a class="green" href="/update/395">Update</a>
            </td>
          </tr>
          <tr>
            <th class="fixed-side">395</th>
            <td>chicken liver</td>
            <td>0.37</td>
            <td>2019-10-14</td>
            <td>67</td>
            <td>
              <a class="red" href="/delete/395">Delete</a>
              <a class="green" href="/update/395">Update</a>
            </td>
          </tr>
          <tr>
            <th class="fixed-side">395</th>
            <td>chicken liver</td>
            <td>0.37</td>
            <td>2019-10-14</td>
            <td>67</td>
            <td>
              <a class="red" href="/delete/395">Delete</a>
              <a class="green" href="/update/395">Update</a>
            </td>
          </tr>
          <tr>
            <th class="fixed-side">395</th>
            <td>chicken liver</td>
            <td>0.37</td>
            <td>2019-10-14</td>
            <td>67</td>
            <td>
              <a class="red" href="/delete/395">Delete</a>
              <a class="green" href="/update/395">Update</a>
            </td>
          </tr>
          <tr>
            <th class="fixed-side">395</th>
            <td>chicken liver</td>
            <td>0.37</td>
            <td>2019-10-14</td>
            <td>67</td>
            <td>
              <a class="red" href="/delete/395">Delete</a>
              <a class="green" href="/update/395">Update</a>
            </td>
          </tr>
          <tr>
            <th class="fixed-side">395</th>
            <td>chicken liver</td>
            <td>0.37</td>
            <td>2019-10-14</td>
            <td>67</td>
            <td>
              <a class="red" href="/delete/395">Delete</a>
              <a class="green" href="/update/395">Update</a>
            </td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <th class="fixed-side">&nbsp;</th>
            <td>Footer 2</td>
            <td>Footer 3</td>
            <td>Footer 4</td>
            <td>Footer 5</td>
            <td>Footer 6</td>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <script type="text/javascript">
    // requires jquery library
    jQuery(document).ready(function() {
      jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone');
    });
  </script>
</body>

</html>

html css可滚动表与上面的表不对齐

1 个答案: