问具有固定标题的仅限CSS的可滚动表格
EN

Stack Overflow用户

提问于 2012-08-10 04:00:25

回答 13查看 179.5K关注 0票数 73

我有一个解决方案，通过这个解决方案，我可以使用次要的jQuery和CSS创建具有固定页眉/页脚的可滚动表格-但我正在寻找一种方法，使其成为一个跨浏览器兼容的CSS解决方案。

为了清楚起见，我想要做的是只使用一个table标签(它是有效子标签，colgroup，col，thead，tbody，tfoot，tr，<代码>D9，<代码>D10)，但采用一组满足以下条件的规则：

必须保持页眉/页脚/内容行之间的列对齐
必须允许页眉/页脚保持固定，而内容滚动vertically
Must不需要任何JavaScript或其他functionality
Must，以便只使用上面提供的标记

这个代码示例：http://jsfiddle.net/TroyAlford/SNKfd/显示了我当前的方法。JS的大部分只是用随机值填充表，但最后一部分是驱动左/右滚动的部分。

$tbody.bind('scroll', function(ev) {
    var $css = { 'left': -ev.target.scrollLeft };
    $thead.css($css);
    $tfoot.css($css);
});

注意:提供的示例无法在IE中正确呈现，需要jQuery提供水平滚动。我并不关心水平滚动，所以如果一个解决方案不能做到这一点也没关系。

html

internet-explorer

css

回答 13

Stack Overflow用户

回答已采纳

发布于 2018-09-21 21:13:25

此答案将用作不完全支持的position: sticky的占位符，并将随着时间的推移而更新。目前建议不要在生产环境中使用本机实现。

查看当前的支持：https://caniuse.com/#feat=css-sticky

position: sticky的使用

另一种解决方案是使用position: sticky。As described by W3C

粘滞定位框的定位类似于相对定位的框，但偏移量是参考具有滚动框的最近祖先计算的，如果没有祖先具有滚动框，则参考视口计算偏移量。

这准确地描述了相对静态标头的行为。很容易将其分配给<thead>或第一个<tr> HTML标记，因为这应该是受according to W3C支持的。但是，Chrome和IE and Edge在为这些标记分配粘滞的position属性时都会遇到问题。目前似乎也没有解决这个问题的优先事项。

似乎对表格元素有效的方法是将sticky属性分配给表格单元格。在本例中是<th>单元格。

因为一个表不是一个块元素，它遵循您分配给它的静态大小，所以最好使用包装器元素来定义滚动溢出。

代码

div {
  display: inline-block;
  height: 150px;
  overflow: auto
}

table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}


/* == Just general styling, not relevant :) == */

table {
  border-collapse: collapse;
}

th {
  background-color: #1976D2;
  color: #fff;
}

th,
td {
  padding: 1em .5em;
}

table tr {
  color: #212121;
}

table tr:nth-child(odd) {
  background-color: #BBDEFB;
}

<div>
  <table border="0">
    <thead>
      <tr>
        <th>head1</th>
        <th>head2</th>
        <th>head3</th>
        <th>head4</th>
      </tr>
    </thead>
    <tr>
      <td>row 1, cell 1</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
    </tr>
    <tr>
      <td>row 2, cell 1</td>
      <td>row 2, cell 2</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
    </tr>
    <tr>
      <td>row 2, cell 1</td>
      <td>row 2, cell 2</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
    </tr>
    <tr>
      <td>row 2, cell 1</td>
      <td>row 2, cell 2</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
    </tr>
    <tr>
      <td>row 2, cell 1</td>
      <td>row 2, cell 2</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
    </tr>
  </table>
</div>

在本例中，我使用一个简单的<div>包装器来定义静态高度为150px的滚动溢出。当然，这可以是任何大小。现在已经定义了滚动框，粘性<th>元素将对应于“与滚动框最接近的祖先”，这就是div-wrapper。

使用position: sticky polyfill

不受支持的设备可以利用polyfill，它通过代码实现行为。stickybits就是一个例子，它的行为类似于浏览器实现的position: sticky。

使用polyfill的示例： http://jsfiddle.net/7UZA4/6957/

票数 40

Stack Overflow用户

发布于 2015-08-04 06:31:33

令人惊讶的是，使用flexbox的解决方案尚未发布。

这是我的解决方案，使用display: flex和:after的基本用法(感谢Luggage)来保持对齐，即使滚动条稍微填充了tbody。这一点已经在Chrome45、Firefox39和MS Edge中得到了验证。可以使用前缀属性对其进行修改，以在IE11中工作，并进一步在IE10中使用CSS hack和2012 flexbox syntax。

注意表格宽度是可以修改的；这甚至适用于100%宽度。

唯一需要注意的是，所有表单元格的宽度都必须相同。下面是一个明显是人为设计的例子，但当单元格内容不同时，这种方法工作得很好(表格单元格都有相同的宽度和自动换行，强制flexbox保持宽度不变，而不管内容如何)。Here就是一个单元格内容不同的例子。

只需将.scroll类应用于您希望可滚动的表，并确保它具有thead

.scroll {
  border: 0;
  border-collapse: collapse;
}

.scroll tr {
  display: flex;
}

.scroll td {
  padding: 3px;
  flex: 1 auto;
  border: 1px solid #aaa;
  width: 1px;
  word-wrap: break-word;
}

.scroll thead tr:after {
  content: '';
  overflow-y: scroll;
  visibility: hidden;
  height: 0;
}

.scroll thead th {
  flex: 1 auto;
  display: block;
  border: 1px solid #000;
}

.scroll tbody {
  display: block;
  width: 100%;
  overflow-y: auto;
  height: 200px;
}

<table class="scroll" width="400px">
  <thead>
    <tr>
      <th>Header</th>
      <th>Header</th>
      <th>Header</th>
      <th>Header</th>
      <th>Header</th>
      <th>Header</th>
    </tr>
  </thead>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
</table>

票数 18

Stack Overflow用户

发布于 2016-09-28 22:18:33

受@Purag答案的启发，这里有另一个flexbox解决方案：

/* basic settings */
table { display: flex; flex-direction: column; width: 200px; }
tr { display: flex; }
th:nth-child(1), td:nth-child(1) { flex-basis: 35%; }
th:nth-child(2), td:nth-child(2) { flex-basis: 65%; }
thead, tbody { overflow-y: scroll; }
tbody { height: 100px; }

/* color settings*/
table, th, td { border: 1px solid black; }
tr:nth-child(odd) { background: #EEE; }
tr:nth-child(even) { background: #AAA; }
thead tr:first-child { background: #333; }
th:first-child, td:first-child { background: rgba(200,200,0,0.7); }
th:last-child, td:last-child { background: rgba(255,200,0,0.7); }

<table>
    <thead>
      <tr>
        <th>a
        <th>bbbb
    <tbody>
      <tr>
        <td>fooo vsync dynamic
        <td>bar
      <tr>
        <td>a
        <td>b
      <tr>
        <td>a
        <td>b
      <tr>
        <td>a
        <td>b
      <tr>
        <td>a
        <td>b
      <tr>
        <td>a
        <td>b
      <tr>
        <td>a
        <td>b
  </table>

票数 8

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/11891065

复制

相似问题

问具有固定标题的仅限CSS的可滚动表格
EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有固定标题的仅限CSS的可滚动表格EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有固定标题的仅限CSS的可滚动表格
EN