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

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：块。这样，就分开了。

您可以将其添加到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>