带有粘性标题和水平滚动的多个表格

Question

我想要两张并排的桌子......

1. 共享同一个垂直滚动
2. 有单独的水平卷轴
3. 有粘性标题

...都在一个灵活的宽度和高度的容器内。

这是我尝试的代码笔：https://codepen.io/numberjak/pen/gOYGEKz

如您所见，我已经勾选了我的所有要求，除了两个表都有粘性标题。

<div class="container">
  <div class="scroll red">
    <table>
      <thead>
        <tr>
          <th>Scroll 1</th>
          <th>Scroll 2</th>
          <th>Scroll 3</th>
          <th>Scroll 4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="scroll blue">
    <table>
      <thead>
        <tr>
          <th>Scroll 1</th>
          <th>Scroll 2</th>
          <th>Scroll 3</th>
          <th>Scroll 4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

html {
  height: 100%;
  background-color: black;
}

div {
  display: flex;
}

.container {
  overflow: auto;
  align-items: flex-start;
  max-height: 20rem;
}

thead th {
  position: sticky;
  top: 0;
  background-color: grey;
}

td, th {
  min-width: 30rem;
  padding: 1rem;
  background-color: white;
}

tr {
  height: 10rem;
}

.scroll {
  overflow: auto;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

Answer 1

表头和表体仍然连接，它们仍然具有相同的滚动属性。现在让它们不再像表格一样“工作”，您可以设置 display: block。这样又分开了。

您可以将其添加到您的 css 中

table tbody, table thead
{
    display: block;
}
table tbody 
{
   overflow: auto;
   height: 100px;
}

滚动问题可以用一些javascript来解决！

$(".red tbody").scroll(function() {
  $(".blue tbody").scrollTop($(".red tbody").scrollTop());
});

$(".blue tbody").scroll(function() {
  $(".red tbody").scrollTop($(".blue tbody").scrollTop() );
});

所以最终产品看起来像这样

$(".red tbody").scroll(function() {
  $(".blue tbody").scrollTop($(".red tbody").scrollTop());
});

$(".blue tbody").scroll(function() {
  $(".red tbody").scrollTop($(".blue tbody").scrollTop() );
});

html {
  height: 100%;
  background-color: black;
}

div {
  display: flex;
}

.container {
  overflow: auto;
  align-items: flex-start;
  max-height: 20rem;
}

thead th {
  position: sticky;
  top: 0;
  background-color: grey;
}

td, th {
  min-width: 30rem;
  padding: 1rem;
  background-color: white;
}

tr {
  height: 10rem;
}

.scroll {
  overflow: auto;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

table tbody, table thead
{
    display: block;
}
table tbody 
{
   overflow: auto;
   height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="scroll red">
    <table>
      <thead>
        <tr>
          <th>Scroll 1</th>
          <th>Scroll 2</th>
          <th>Scroll 3</th>
          <th>Scroll 4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="scroll blue">
    <table>
      <thead>
        <tr>
          <th>Scroll 1</th>
          <th>Scroll 2</th>
          <th>Scroll 3</th>
          <th>Scroll 4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>