在纯css上带有固定标题和固定列的表
我需要创build一个固定的头和一个固定的第一列的HTML表（或类似的东西）。
到目前为止，我所见过的每个解决scheme都使用Javascript或jQuery来设置scrollTop / scrollLeft，但在移动浏览器上无法顺利运行，所以我正在寻找一个纯粹的CSS解决scheme。
我在这里find了一个固定列的解决scheme： jsfiddle.net/C8Dtf/20/，但是我不知道如何增强它来修改头文件。
我希望它在webkit浏览器上工作，或使用一些css3function，但我再说一遍，我不想使用Javascript进行滚动。
编辑：这是我想要实现的行为的示例： http : //datatables.net/release-datatables/extras/FixedColumns/css_size.html
这不是容易的事。
以下链接是一个工作演示：
链接根据lanoxx的评论更新
http://jsfiddle.net/C8Dtf/366/
只要记住添加这些：
<script type="text/javascript" charset="utf-8" src="http://datatables.net/release-datatables/media/js/jquery.js"></script> <script type="text/javascript" charset="utf-8" src="http://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script> <script type="text/javascript" charset="utf-8" src="http://datatables.net/release-datatables/extras/FixedColumns/media/js/FixedColumns.js"></script>
我没有看到任何其他的方式来实现这一点。 特别是不使用CSS。
这是很多要经历的。 希望这可以帮助 ：）
所有这些build议都很好，但是它们只是修正了标题或列，而不是两者，或者他们正在使用javascript。 原因 – 它不相信它可以在纯CSS中完成。 原因：
如果可以这样做的话，你需要将几个可滚动的div嵌套在另一个里面，每个div都有不同的方向滚动。 那么你需要把你的表分成三部分 – 固定的头部，固定的列和其余的数据。
精细。 但现在这个问题 – 当你滚动时，你可以让其中一个保持放置，而另一个嵌套在第一个滚动区域内，因此它本身可能被滚动到不可见的位置，所以不能固定到位屏幕。 你说'啊哈'，但我可以用绝对或固定的位置来做这个' – 不，你不能。 一旦你这样做，你就失去了滚动该容器的能力。 这是一个鸡蛋和鸡蛋的情况 – 你不能有两个，他们相互抵消。
我相信唯一的解决办法是通过JavaScript。 你需要完全分离出三个元素，并通过javascript保持同步。 在这个页面的其他post里有很好的例子。 这一个也值得一看：
http://tympanus.net/codrops/2014/01/09/sticky-table-headers-columns/
仅使用CSS的示例：
<html> <head> </head> <style> .table { table-layout:fixed; width:500px; border-collapse:collapse; } .header th { font-family:Calibri; font-size:small; font-weight:lighter; border-left:1px solid #000; background:#d0d0d0; } .body_panel { display:inline-block; width:520px; height:300px; overflow-y:scroll; } .body tr { border-bottom:1px solid #d0d0d0; } .body td { border-left:1px solid #d0d0d0; padding-left:3px; font-family:Calibri; font-size:small; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } </style> <body> <table class="table"> <thead class="header"> <tr> <th style="width:20%;">teste</th> <th style="width:30%;">teste 2</th> <th style="width:50%;">teste 3</th> </tr> </thead> </table> <div class="body_panel"> <table class="table"> <tbody class="body"> <tr> <td style="width:20%;">asbkj k kajsb ksb kabkb</td> <td style="width:30%;">2</td> <td style="width:50%;">3</td> </tr> <tr> <td style="width:20%;">2</td> <td style="width:30%;">2</td> <td style="width:50%;">3</td> </tr> <tr> <td style="width:20%;">2</td> <td style="width:30%;">2</td> <td style="width:50%;">3</td> </tr> <tr> <td style="width:20%;">2</td> <td style="width:30%;">2</td> <td style="width:50%;">3</td> </tr> <tr> <td style="width:20%;">2</td> <td style="width:30%;">2</td> <td style="width:50%;">3</td> </tr> <tr> <td style="width:20%;">2</td> <td style="width:30%;">2</td> <td style="width:50%;">3</td> </tr> <tr> <td style="width:20%;">2</td> <td style="width:30%;">2</td> <td style="width:50%;">3</td> </tr> <tr> <td style="width:20%;">2</td> <td style="width:30%;">2</td> <td style="width:50%;">3</td> </tr> <tr> <td style="width:20%;">2</td> <td style="width:30%;">2</td> <td style="width:50%;">3</td> </tr> <tr> <td style="width:20%;">2</td> <td style="width:30%;">2</td> <td style="width:50%;">3</td> </tr> <tr> <td style="width:20%;">2</td> <td style="width:30%;">2</td> <td style="width:50%;">3</td> </tr> <tr> <td style="width:20%;">2</td> <td style="width:30%;">2</td> <td style="width:50%;">3</td> </tr> <tr> <td style="width:20%;">2</td> <td style="width:30%;">2</td> <td style="width:50%;">3</td> </tr> <tr> <td style="width:20%;">2</td> <td style="width:30%;">2</td> <td style="width:50%;">3</td> </tr> <tr> <td style="width:20%;">2</td> <td style="width:30%;">2</td> <td style="width:50%;">3</td> </tr> <tr> <td style="width:20%;">2</td> <td style="width:30%;">2</td> <td style="width:50%;">3</td> </tr> <tr> <td style="width:20%;">2</td> <td style="width:30%;">2</td> <td style="width:50%;">3</td> </tr> <tr> <td style="width:20%;">2</td> <td style="width:30%;">2</td> <td style="width:50%;">3</td> </tr> </tbody> </table> </div> </body> </html>
我在jsfiddle中做了一些改变。 这可能是你想要做的。
我已经硬编码的标题是这样的：
<table id="left_table" class="freeze_table"> <tr class='tblTitle'> <th>Title 1</th> <th>Title 2</th> </tr> </table>
我还添加了一些样式。
.tblTitle{ position:absolute; top:0px; margin-bottom:30px; background:lightblue; } td, th{ padding:5px; height:40px; width:40px; font-size:14px; }
希望这是你想要的:)
我最近不得不用一个固定的头文件组和一个固定的第一列来创build一个解决scheme。 我把我的表分成div的和使用jquery捕获窗口滚动。
http://jsfiddle.net/TinT/EzXub/2346/
var prevTop = 0; var prevLeft = 0; $(window).scroll(function(event){ var currentTop = $(this).scrollTop(); var currentLeft = $(this).scrollLeft(); if(prevLeft !== currentLeft) { prevLeft = currentLeft; $('.header').css({'left': -$(this).scrollLeft()}) } if(prevTop !== currentTop) { prevTop = currentTop; $('.leftCol').css({'top': -$(this).scrollTop() + 40}) } });
要修复标题和列，我发现这些插件：
希望这个帮助！ 🙂
现在有一天， 只有 position: sticky属性才能实现CSS 。
这里有一个片段：
（jsFiddle： https ://jsfiddle.net/hbqzdzdt/5/）
.grid-container { display: grid; /* This is a (hacky) way to make the .grid element size to fit its content */ overflow: auto; height: 300px; width: 600px; } .grid { display: flex; flex-wrap: nowrap; } .grid-col { width: 150px; min-width: 150px; } .grid-item--header { height: 100px; min-height: 100px; position: sticky; position: -webkit-sticky; background: white; top: 0; } .grid-col--fixed-left { position: sticky; left: 0; z-index: 9998; background: white; } .grid-col--fixed-right { position: sticky; right: 0; z-index: 9998; background: white; } .grid-item { height: 50px; border: 1px solid gray; }
<div class="grid-container"> <div class="grid"> <div class="grid-col grid-col--fixed-left"> <div class="grid-item grid-item--header"> <p>HEAD</p> </div> <div class="grid-item"> <p>Hello</p> </div> <div class="grid-item"> <p>Hello</p> </div> <div class="grid-item"> <p>Hello</p> </div> <div class="grid-item"> <p>Hello</p> </div> <div class="grid-item"> <p>Hello</p> </div> <div class="grid-item"> <p>Hello</p> </div> <div class="grid-item"> <p>Hello</p> </div> <div class="grid-item"> <p>Hello</p> </div> <div class="grid-item"> <p>Hello</p> </div> <div class="grid-item"> <p>Hello</p> </div> </div> <div class="grid-col"> <div class="grid-item grid-item--header"> <p>HEAD</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> </div> <div class="grid-col"> <div class="grid-item grid-item--header"> <p>HEAD</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> </div> <div class="grid-col"> <div class="grid-item grid-item--header"> <p>HEAD</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> </div> <div class="grid-col"> <div class="grid-item grid-item--header"> <p>HEAD</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> </div> <div class="grid-col"> <div class="grid-item grid-item--header"> <p>HEAD</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> </div> <div class="grid-col"> <div class="grid-item grid-item--header"> <p>HEAD</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> </div> <div class="grid-col"> <div class="grid-item grid-item--header"> <p>HEAD</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> </div> <div class="grid-col"> <div class="grid-item grid-item--header"> <p>HEAD</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> </div> <div class="grid-col"> <div class="grid-item grid-item--header"> <p>HEAD</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> </div> <div class="grid-col"> <div class="grid-item grid-item--header"> <p>HEAD</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> <div class="grid-item"> <p>P</p> </div> </div> <div class="grid-col grid-col--fixed-right"> <div class="grid-item grid-item--header"> <p>HEAD</p> </div> <div class="grid-item"> <p>9</p> </div> <div class="grid-item"> <p>9</p> </div> <div class="grid-item"> <p>9</p> </div> <div class="grid-item"> <p>9</p> </div> <div class="grid-item"> <p>9</p> </div> <div class="grid-item"> <p>9</p> </div> <div class="grid-item"> <p>9</p> </div> <div class="grid-item"> <p>9</p> </div> <div class="grid-item"> <p>9</p> </div> <div class="grid-item"> <p>9</p> </div> </div> </div> </div>
像这样的东西可能会为你工作…它可能会要求你有你的标题行设置列的宽度。
thead { position: fixed; }
更新：
我不相信你给的例子是可能的只用CSS。 我会喜欢有人来certificate我错了。 这是我到目前为止 。 这不是成品，但它可能是你的开始。 我希望这可以指导你，一个有用的方向，无论在哪里。
一位同事和我刚刚发布了一个新的GitHub项目，提供了一个Angular指令，你可以使用它来修饰你的表格： https ： //github.com/objectcomputing/FixedHeader
它只依赖于css和angular，并且有一个指令添加了一些div。 没有要求的jQuery。
这个实现不像其他一些实现那样function全面，但是如果你只需要添加固定表，我们认为这可能是一个不错的select。
经过两天与Internet Explorer 9 + Chrome + Firefox（Windows）和Safari（Mac）的争斗，我发现了一个系统
- 兼容所有这些浏览器
- 没有使用JavaScript
- 只使用非div和一个表
- 固定页眉和页脚（IE浏览器除外），滚动机构。 标题和身体相同的列宽
结果： 
HTML：
<thead> <tr> <th class="nombre"><%= f.label :cost_center %></th> <th class="cabecera cc">Personal</th> <th class="cabecera cc">Dpto</th> </tr> </thead> <tbody> <% @cost_centers.each do |cc| %> <tr> <td class="nombre"><%= cc.nombre_corto %></td> <td class="cc"><%= cc.cacentrocoste %></td> <td class="cc"><%= cc.cacentrocoste_dpto %></td> </tr> <% end %> </tbody> <tfoot> <tr> <td colspan="3"><a href="#">Mostrar mas usuarios</a></td> </tr> </tfoot> </table>
CSS：
div.cost_center{ width:320px; font-size:75%; margin-left:5px; margin-top:5px; margin-bottom: 2px; float: right; display: inline-block; overflow-y: auto; overflow-x: hidden; max-height:300px; } div.cost_center label { float:none; font-size:14px; } div.cost_center table{ width:300px; border-collapse: collapse; float:right; table-layout:fixed; } div.cost_center table tr{ height:16px; } div.cost_center th{ font-weight:normal; } div.cost_center table tbody{ display: block; overflow: auto; max-height:240px; } div.cost_center table thead{ display:block; } div.cost_center table tfoot{ display:block; } div.cost_center table tfoot td{ width:280px; } div.cost_center .cc{ width:60px; text-align: center; border: 1px solid #999; } div.cost_center .nombre{ width:150px; } div.cost_center tbody .nombre{ border: 1px solid #999; } div.cost_center table tfoot td{ text-align:center; border: 1px solid #999; } div.cost_center table th, div.cost_center table td { padding: 2px; vertical-align: middle; } div.cost_center table tbody td { white-space: normal; font: .8em/1.4em Verdana, sans-serif; color: #000; background-color: white; } div.cost_center table th.cabecera { font: 0.8em/1.4em Verdana, sans-serif; color: #000; background-color: #FFEAB5; }
另一个解决scheme是使用AngularJS。 AngularUI模块有一个叫做ng-grid的指令，它支持一个称为列locking的特性。 这不是100％纯CSS，但其他解决scheme也不是。
我认为这将帮助你： https ： //datatables.net/release-datatables/extensions/FixedHeader/examples/header_footer.html
简而言之，如果您知道如何创build数据表，您只需要将此jQuery行添加到底部即可：
$(document).ready(function() { var table = $('#example').DataTable(); new $.fn.dataTable.FixedHeader( table, { bottom: true } ); } );
底部：真/ /是为了使底部头部固定以及。
纯CSS例子：
<div id="cntnr"> <div class="tableHeader"> <table class="table-header table table-striped table-bordered"> <thead> <tr> <th>this</th> <th>transmission</th> <th>is</th> <th>coming</th> <th>to</th> <th>you</th> </tr> </thead> <tbody> <tr> <td>we've got it...</td> <td>alright you are go</td> <td>uh, we see the Earth now</td> <td>we've got it...</td> <td>alright you are go</td> <td>uh, we see the Earth now</td> </tr> </tbody> </table> </div> <div class="tableBody"> <table class="table-body table table-striped table-bordered"> <thead> <tr> <th>this</th> <th>transmission</th> <th>is</th> <th>coming</th> <th>to</th> <th>you</th> </tr> </thead> <tbody> <tr> <td>we've got it...</td> <td>alright you are go</td> <td>uh, we see the Earth now</td> <td>we've got it...</td> <td>alright you are go</td> <td>uh, we see the Earth now</td> </tr> </tbody> </table> </div> </div> #cntnr { width: auto; height: 200px; border: solid 1px #444; overflow: auto; } .tableHeader { position: fixed; height: 40px; overflow: hidden; margin-right: 18px; background: white; } .table-header tbody { height: 0; visibility: hidden; } .table-body thead { height: 0; visibility: hidden; }
http://jsfiddle.net/cCarlson/L98m854d/
缺点：固定头结构/逻辑相当依赖于特定的维度，所以抽象可能不是一个可行的select 。
只需要改变风格
<table style="position: relative;"> <thead> <thead> <tr> <th></th> </tr> </thead> </thead> <tbody style="position: absolute;height: 300px;overflow:auto;"> <tr> <td></td> </tr> </tbody> </table>
演示： https : //plnkr.co/edit/Qxy5RMJBXmkaJAOjBtQn?p=preview
如果你只想使用纯HTML和CSS我有你的问题的解决scheme：
在这个jsFiddle中，您可以看到一个非脚本解决scheme，它提供了一个带有固定标题的表格。 将标记适用于固定的第一列也不成问题。 您只需要为hWrapper的第一列创build一个绝对定位的表并重新定位vWrapper 。
提供dynamic内容不应该是使用服务器端或浏览器端引诱引擎的问题，我的解决scheme适用于所有现代浏览器和从IE8以上的旧版浏览器。
