具有粘性標題和水平滾動的多個表

Question

我想要兩張桌子並排...

1. 共享相同的垂直滾動
2. 有單獨的水平滾動
3. 標頭有粘性

...所有容器都在寬度和高度可變的容器內

這是我嘗試的codepen： 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>