仅CSS可滚动表与固定标题 [英] CSS-Only Scrollable Table with fixed headers

查看：145
本文介绍了仅CSS可滚动表与固定标题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个解决方案，我可以创建可滚动表w /固定的页眉/页脚使用次要的jQuery和CSS - 但我正在寻找一种方法，使这是一个纯CSS解决方案是跨浏览器兼容。 p>

要明确，我想要做的是使用只一个表它是有效的子标签， colgroup ， col ， thead ， tbody ， tfoot ， tr ， th ， td ），但采用一组满足以下条件的CSS规则：


  1. 必须保持页眉/页脚/内容行之间的列对齐

  2. 必须允许页眉/页脚在内容垂直滚动时保持固定

  3. 不得要求任何jQuery或其他JavaScript才能提供此功能

  4. 只能使用上面提供的标签

此代码示例： 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提供水平滚动。

解决方案

惊讶的解决方案使用flexbox还没有发布。



这里是我的解决方案使用 display：flex code>：after （感谢行李），即使在滚动条填充 tbody 一点。这已在 Chrome 45，Firefox 39和MS Edge 中得到验证。可以使用前缀属性修改它在IE11中工作，进一步在IE10中使用 CSS hack 和 2012 flexbox语法。



请注意，表格宽度可以修改;这甚至可以在 100％宽度。



唯一的注意事项是，所有表格单元格必须具有相同的宽度。下面是一个清楚的例子，但是当单元格内容变化（表格单元格全部具有相同的宽度和单词包装，强制flexbox保持相同的宽度，不管内容），这工作正常。 这里是单元格内容不同的示例。



只需将 .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;}。scroll thead tr：after {content：''; overflow-y：scroll; visibility：hidden; height：0;}。滚动第{flex：1 auto;显示：block; border：1px solid＃000;}。scroll tbody {display：block;宽度：100％; overflow-y：auto; height：200px;}  

 < table class = width =400px> < aad> < tr> < th> Header< / th> < th> Header< / th> < th> Header< / th> < th> Header< / th> < th> Header< / th> < th> Header< / th> < / tr> < / thead> < tr> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < / tr> < tr> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < / tr> < tr> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < / tr> < tr> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < / tr> < tr> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < / tr> < tr> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < / tr> < tr> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < / tr> < tr> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < / tr> < tr> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < / tr> < tr> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < / tr> < tr> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < / tr> < tr> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < / tr> < tr> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < / tr> < tr> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < / tr> < tr> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < / tr> < tr> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < / tr> < tr> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < / tr> < tr> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < td>数据< / td> < / tr>< / table>


I have a solution by which I can create scrollable tables w/fixed header/footer using minor jQuery and CSS - but I am looking for a way to make this a CSS-only solution that is cross-browser compliant.

To be clear, what I am seeking to do is use only a table tag (and it's valid sub-tags, colgroup, col, thead, tbody, tfoot, tr, th, td), but adopt a set of CSS rules which will meet the following conditions:

  1. Must maintain column alignment between header / footer / content rows
  2. Must allow the header/footer to remain fixed while the content scrolls vertically
  3. Must not require any jQuery or other JavaScript in order to provide the functionality
  4. Must only use the tags provided above

This code example: http://jsfiddle.net/TroyAlford/SNKfd/ shows my current approach. Most of the JS is just to populate the table with random values, but the last portion is what drives the left/right scrollability.

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

NOTE: The example provided does not render properly in IE, and requires jQuery to provide the horizontal scrolling. I don't care about horizontal scrolling anyway, so it's fine if a solution doesn't do that.

解决方案

Surprised a solution using flexbox hasn't been posted yet.

Here's my solution using display: flex and a basic use of :after (thanks to Luggage) to maintain the alignment even with the scrollbar padding the tbody a bit. This has been verified in Chrome 45, Firefox 39, and MS Edge. It can be modified with prefixed properties to work in IE11, and further in IE10 with a CSS hack and the 2012 flexbox syntax.

Note the table width can be modified; this even works at 100% width.

The only caveat is that all table cells must have the same width. Below is a clearly contrived example, but this works fine when cell contents vary (table cells all have the same width and word wrapping on, forcing flexbox to keep them the same width regardless of content). Here is an example where cell contents are different.

Just apply the .scroll class to a table you want scrollable, and make sure it has a 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;
}

.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>

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

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆