Flexbox 类型的固定表头，表格标记的可滚动内容答案

【问题标题】：Flexbox type fixed header, scrollable content for table markupFlexbox 类型的固定表头，表格标记的可滚动内容
【发布时间】：2018-05-25 23:31:32
【问题描述】：

我正在使用一个使用传统表标记的数据表，但我想要的是我的表从页面中的某个位置开始，我希望我的表头固定在它开始的位置，并且表体应该滚动剩余页面高度
我在这里展示一个小例子

https://codepen.io/avreddy/pen/eyYBdB?editors=1100

.datatable{
  width: 50%;
  border-collapse: collapse;
}
td{
  text-align: center;
  border: 1px solid;
  padding:5px;
}

<body>
  <div class="somecontent">
    <h4>Some Content</h4><h4>Some Content</h4><h4>Some Content</h4>
  </div>
  <table class="datatable">
    <thead>
      <tr>
      <th>col1</th>
      <th>col2</th>
      <th>col3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr>
      <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr>
    </tbody>
  </table>
</body>

我知道我们可以从 flex-box 响应式表格中获取它，但我的限制是我必须使用传统的表格标记，所以如果告诉我除了 flex-box 响应式表格还有其他方法吗
谢谢

【问题讨论】：

标签： html css html-table flexbox

【解决方案1】：

可滚动表格 + 固定标题技巧不能用于自动列宽。这是因为它们更改了 tbody 元素的显示属性，从而创建了一个具有不同列宽的新（匿名）表。

我能想到的最佳解决方案是创建表格的副本（以便两者具有相同的内容，因此具有相同的列宽）并独立操作它们。

在下面的示例中，我使用 jQuery 创建表的副本并使用visibility: collapse 来隐藏表头和表体：

$(function() {
  $("#button-1").one("click", function() {
    $(".datatable").clone().insertAfter(".datatable");
    $(".datatable").eq(0).addClass("tablehead");
    $(".datatable").eq(1).addClass("tablebody");
  });
});

/* full height */
html { height: 100%; }
body { height: 100%; margin: 0; padding: 0; font: medium monospace; }

/* make last item scrollable and occupy available height */
#wrapper { height: 100%; display: flex; flex-direction: column; overflow-y: hidden; }
#wrapper > :last-child { display: block; flex: 1; overflow-y: auto; }

/* make thead and tbody collapse when JavaScript adds the classes */
.datatable.tablehead tbody { visibility: collapse; }
.datatable.tablebody thead { visibility: collapse; }

/* beautify */
.datatable { border-collapse: collapse; }
.datatable th { border: 1px solid; background-color: #CCC; }
.datatable td { border: 1px solid; padding: 5px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!--
Notes:

1) Using a wrapper div instead of body because third party scripts
often append elements to body element breaking our flex model

2) Width of second column is determined by thead > 1st row > 2nd column
while width of third column is determined by tbody > 1st row > 3rd column

3) If JavaScript fails the result is still usable
-->

<div id="wrapper">
  <div>
    <h4>Some Content</h4>
    <h4>Some Content</h4>
    <p><button type="button" id="button-1">Convert to fixed header</button></p>
  </div>
  <table class="datatable">
    <thead>
      <tr>
        <th>col 1</th>
        <th>col 2 (wide header)</th>
        <th>col 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3 (wide content)</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>
</div>

请注意，visibility: collapse 并非在所有浏览器中都正确实现。另一种解决方案是将两个表包装在 div 中：标题表的固定高度 div，正文表的可滚动 div。但是你需要设置标题的高度。

【讨论】：

您不能使用弹性显示来显示数据表，因为它会干扰表格布局您可以看到表格的子项未根据表格标题对齐，因为仅弹性显示
@AravindReddy 是的，这是一个已知问题。解决方法是在每列上指定一个固定的 % 或 px 宽度。
@AravindReddy 查看修改后的答案。

【解决方案2】：

.datatable{
  width: 50%;
  border-collapse: collapse;
}

/*this code is added to fix header at the top of the screen*/

thead th{
  position: sticky; /*stick the element*/
  top: 0px;
  background: grey;
}
td{
  text-align: center;
  border: 1px solid;
  padding:5px;
}

<body>
  <div class="somecontent">
    <h4>Some Content</h4><h4>Some Content</h4><h4>Some Content</h4>
  </div>
  <table class="datatable">
    <thead>
      <tr>
      <th>col1</th>
      <th>col2</th>
      <th>col3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr>
      <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr>
    </tbody>
  </table>
</body>

你想要这样的标题将被粘在页面顶部。

【讨论】：

【解决方案3】：

尝试将position: sticky 替换为您的thead。

您需要将其应用到th 才能在所有浏览器中工作。

thead th {
    position: sticky;           // Sticky makes it, well, sticky
    top: 0px;                   // At which offset it should become sticky
    background-color: #fff;     // Otherwise the th is transparent
}

Codepen

要使其从当前位置保持粘性，您可以使用一些 javascript：

let topOffset = document.getElementById("datatable").offsetTop;
let elementList = document.querySelectorAll('.datatable thead th');

for (i = 0; i < elementList.length; i++) {
  elementList[i].style.top = topOffset + 'px';
}

现在在笔中可能看起来有点奇怪（重叠/透明度），但是当您说 thead 上方有内容（标题、警报框......）时，只需应用 zIndex 更高比桌子，它应该看起来不错。

我目前在一个网站上工作，它有一个全屏表格、一个粘性标题和一个可变高度的内容块，这就是我使用的（尽管偏移量的计算与 AngularJS 略有不同）。

Codepen

【讨论】：

我知道如果您知道顶部偏移量，这可能会起作用，但我的问题是我不知道顶部内容将使用多少空间我希望将头贴在它开始的位置
是的，兄弟我也知道，我也尝试过，但问题是先加载表格，然后加载顶部内容，因为我对两者都使用不同的控制器，所以如果我使用你提到的 java 代码它会在标题顶部内容加载之前采用顶部偏移量，因此它是无用的
然后将其包装在一个功能块中，并使用 onload:<div class='header' onload='calculateTableOffset()'></div> 调用它，或者在加载后在您的控制器中调用它。
好的，我会尝试，但看看其他答案，我认为有人在没有 javascript 的情况下回答了我的问题