可滚动表
[英]Scrollable table
问题描述
In 2005, Stu Nichols posted this entry about have a fixed header with scrolling rows in a table. 
在2005年，Stu Nichols发布了此条目，内容涉及具有固定的标头和表格中的滚动行。
Is there a more updated solution to this task, or is what Stu wrote in 2005 still considered the latest? 是否有针对此任务的更新解决方案，还是Stu在2005年撰写的内容仍被认为是最新的？
5 个解决方案
解决方案1
1 2014-02-11 04:19:03
I have a good solution! 我有一个好的解决方案！ Try this, see if you can understand... It's all about css display... 尝试一下，看看您是否能理解...都是关于CSS显示...
<html>
<head>
<meta charset="UTF-8">
<title>Ex Scrollable Table</title>
<style type="text/css">
.divScroll
{
display:block;
overflow-x: hidden;
overflow-y: scroll;
-ms-overflow-x: hidden;
-ms-overflow-y: scroll;
height: 70px;
}
.Header
{
display:table-header-group;
}
.HeaderCell
{
text-align: left;
display: table-cell;
}
.FooterCell
{
display: table-cell;
text-align: left;
}
.Row
{
display:table-row;
}
.Cell
{
display: table-cell;
}
.Footer
{
display: table-footer-group;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th class="Header">
<div class="Row">
<div class="HeaderCell" style="width:140px;">Column1</div>
<div class="HeaderCell" style="width:90px;">Column2 </div>
<div class="HeaderCell" style="width:190px;">Column3</div>
<div class="HeaderCell" style="width:100px;">Column4</div>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="divScroll">
<div class="Row">
<div class="Cell" style="width:140px;">c1</div>
<div class="Cell" style="width:90px;">c2</div>
<div class="Cell" style="width:190px;">c3</div>
<div class="Cell" style="width:100px;">c4</div>
</div>
<div class="Row">
<div class="Cell" style="width:140px;">c1</div>
<div class="Cell" style="width:90px;">c2</div>
<div class="Cell" style="width:190px;">c3</div>
<div class="Cell" style="width:100px;">c4</div>
</div>
<div class="Row">
<div class="Cell" style="width:140px;">c1</div>
<div class="Cell" style="width:90px;">c2</div>
<div class="Cell" style="width:190px;">c3</div>
<div class="Cell" style="width:100px;">c4</div>
</div>
<div class="Row">
<div class="Cell" style="width:140px;">c1</div>
<div class="Cell" style="width:90px;">c2</div>
<div class="Cell" style="width:190px;">c3</div>
<div class="Cell" style="width:100px;">c4</div>
</div>
<div class="Row">
<div class="Cell" style="width:140px;">c1</div>
<div class="Cell" style="width:90px;">c2</div>
<div class="Cell" style="width:190px;">c3</div>
<div class="Cell" style="width:100px;">c4</div>
</div>
<div class="Row">
<div class="Cell" style="width:140px;">c1</div>
<div class="Cell" style="width:90px;">c2</div>
<div class="Cell" style="width:190px;">c3</div>
<div class="Cell" style="width:100px;">c4</div>
</div>
<div class="Row">
<div class="Cell" style="width:140px;">c1</div>
<div class="Cell" style="width:90px;">c2</div>
<div class="Cell" style="width:190px;">c3</div>
<div class="Cell" style="width:100px;">c4</div>
</div>
<div class="Row">
<div class="Cell" style="width:140px;">c1</div>
<div class="Cell" style="width:90px;">c2</div>
<div class="Cell" style="width:190px;">c3</div>
<div class="Cell" style="width:100px;">c4</div>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th class="Footer">
<div class="Row">
<div class="FooterCell" style="width:140px;">A</div>
<div class="FooterCell" style="width:90px;"> B</div>
<div class="FooterCell" style="width:190px;">C</div>
<div class="FooterCell" style="width:100px;">D</div>
</div>
</th>
</tr>
</tfoot>
</table>
</body>
</html>
解决方案2
1 2010-06-04 17:28:20
The second way is kinda how JQGrid handles its scrollable tables. 第二种方法是JQGrid如何处理其可滚动表。 Have a look at thier demos here . 在这里看看他们的演示。 And perhaps instead of recreating the wheel you would like to use thier TableToGrid Method. 也许除了重新创建轮子外，您还想使用TableToGrid方法。 This will take a html table and turn it into thier formatted grid. 这将使用一个html表并将其转换为格式化的网格。
解决方案3
1 2010-06-04 17:30:14
解决方案4
1 已采纳 2010-06-04 17:30:43
That's as current as exists AFAIK. 这与现有的AFAIK一样。 Depending on which browsers you need to support you can use CSS to attach an overflow: scroll to the tbody element, but it's not officially in the CSS spec and only works semi-reliably. 根据需要支持的浏览器，可以使用CSS附加overflow: scroll到tbody元素，但这不是CSS规范中的正式规范，只能半可靠地运行。 Firefox seems to understand it, and I believe Chrome will as well, but IE ignores it enitrely. Firefox似乎了解它，而且我相信Chrome也可以，但是IE却无视它。
解决方案5
1 2010-06-04 22:32:25
I don't know about you but I need tables which can handle dynamic width (and height). 我不了解您，但我需要可以处理动态宽度（和高度）的表格。 Firefox (<= 3.6) is able to handle this very well and none of the suggested frameworks seem to deal with that in a clean way. Firefox（<= 3.6）能够很好地处理此问题，并且所建议的框架似乎都没有一种干净的方式来处理。 Too bad Firefox 3.7 is removing this feature as they call it a bug: 不幸的是，Firefox 3.7删除了此功能，因为他们称之为错误：
https://bugzilla.mozilla.org/show_bug.cgi?id=552080 https://bugzilla.mozilla.org/show_bug.cgi?id=552080
Feel free to vote on this issue and have the Firefox guys rethink their descition. 可以对这个问题进行投票，让Firefox的家伙重新考虑他们的选择。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.