固定表格标题只滚动水平和垂直CSS [英] Fixed table header scroll both horizontal and vertical CSS ONLY

问题描述

首先，是否可以仅使用CSS来实现?

Firstly, is it possible to achieve this using only CSS?

我建立了一个可以在水平和垂直方向上滚动的表格，但是，我想将标题封装在它的容器中，并且不出现在包装器的外部.这样，当您水平滚动时，相应的标题就会与其指定列的内容保持一致.

I have built a table that can scroll both horizontally and vertically however, I want to have the header encapsulated within it's container and not appear outside of the wrapper. So that when you scroll horizontally the corresponding header is in line with the content of it's designated column.

使用 position:absolute 和 position:static 的不同变体可以给我一些预期的结果，但不能提供完整的解决方案.

Using different variations of position: absolute and position: static give me some intended results but not the complete solution.

您会注意到应用于 section 元素的宽度，以产生在封闭区域内水平滚动的效果.

You'll note the width applied to the section element to give the effect of scrolling horizontally within the enclosed region.

这是我到目前为止所拥有的JSFIDDLE示例，下面是CSS供参考

Here is a JSFIDDLE example of what I have so far and CSS below to reference

https://jsfiddle.net/ko6qco1r/

html, body{
  margin:0;
  padding:0;
  height:100%;
}
section {
  position: relative;
  border: 1px solid #000;
  padding-top: 37px;
  background: grey;
  width: 300px;
}

.container {
  overflow-y: auto;
  overflow-x: scroll;
  height: 200px;
}
table {
  border-spacing: 0;
  width:100%;
}
td + td {
  border-left:1px solid #eee;
}
td, th {
  border-bottom:1px solid #eee;
  background: white;
  color: #000;
  padding: 10px 25px;
}
th {
  height: 0;
  line-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  color: transparent;
  border: none;
  white-space: nowrap;
}
th div{
  position: absolute;
  background: transparent;
  color: #fff;
  padding: 9px 25px;
  top: 0;
  margin-left: -25px;
  line-height: normal;
  border-left: 1px solid black;
}
th:first-child div{
  border: none;
}

推荐答案

这是W3C的不作为给我们带来的另一个有趣的挑战(例如垂直居中).与垂直居中一样，您也不能在 thead 元素上使用 position:fixed; 来在带有水平滚动条的表格上放置固定标题.但是您确实有两种选择.

This is another one of those interesting challenges (like vertical centering) brought to us by the inaction of the W3C. Also like vertical centering, you can't put a fixed header on a table with a horizontal scrollbar using position: fixed; on the thead element. But you do have a couple of options.

选项1-水平滚动( http://codepen.io/staypuftman/pen/JXbpvZ )

此处的关键是将您的表布局重新建立为 table-layout:fixed; CSS技巧在这种方法上很有用，然后在您希望滚动条出现时在容器上放置一个 min-width 值.这样可以使表格从左到右滚动，并在较小的设备上保持列标题的完整性.但是标题不是固定的.

The key here is to reestablish your table layout as table-layout: fixed; CSS-tricks has a good piece on this approach and then put a min-width value on your container when you want the scrollbars to appear. This makes the table scrollable left to right and maintains the integrity of the column headers on smaller devices. But the header is not fixed.

选项2-固定标头(( https://jsfiddle.net/dPixie/byB9d/3/light/)

您的代码看起来像是这个家伙的工作的翻版，所以我想我应该在这里转贴以给他一些荣誉.这种方法创建了一系列< div> 元素，这些元素反映了&th; gt; 元素的内容，并使用一些非常有创意的定位技术来使它们全部正常工作.

Your code looked like a rip-off of this guy's work, so I thought I'd repost here to give him some credit. This approach creates a series of <div> elements that mirror the contents of the <th> elements and uses some VERY creative positioning techniques to get it all to work.

Salzar设计有一个更好的总结，显示了一些示例，并详细说明了完成此操作的所有复杂操作.

There is a much better run-down on Salzar design that shows some examples and explains in detail all the complicated maneuvers to get this right.

这篇关于固定表格标题只滚动水平和垂直CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！