Html 使 TBODY 在 Webkit 浏览器中可滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1019938/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make TBODY scrollable in Webkit browsers
提问by Andrew Ensley
I'm aware of this question, but none of the answers work in Safari, Chrome, etc.
我知道这个问题，但没有一个答案在 Safari、Chrome 等中有效。
The accepted strategy (as demonstrated here) is to set the tbody height and overflow properties like so:
接受的策略（如此处所示）是设置 tbody 高度和溢出属性，如下所示：
<table>
<thead>
<tr><th>This is the header and doesn't scroll</th></tr>
</thead>
<tbody style="height:100px; overflow:auto;">
<tr><td>content that scrolls</td></tr>
<tr><td>content that scrolls</td></tr>
<tr><td>content that scrolls</td></tr>
<tr><td>content that scrolls</td></tr>
<tr><td>content that scrolls</td></tr>
<tr><td>content that scrolls</td></tr>
<tr><td>content that scrolls</td></tr>
</tbody>
</table>
Unfortunately, this does not work in any webkit browsers. There is a bug reportabout it that doesn't seem to be a high priority (reported June 05).
不幸的是，这在任何 webkit 浏览器中都不起作用。有一个关于它的错误报告似乎不是一个高优先级（6 月 5 日报告）。
So my question is: are there alternate strategies that do actually work? I've tried the two-table approach, but it's impossible to guarantee that the header will line up with the content. Do I just have to wait for Webkit to fix it?
所以我的问题是：有没有真正有效的替代策略？我已经尝试了两表的方法，但无法保证标题会与内容对齐。我是否只需要等待 Webkit 修复它？
采纳答案by Michael Koper
Here is a working example:
这是一个工作示例：
http://www.imaputz.com/cssStuff/bigFourVersion.html
http://www.imaputz.com/cssStuff/bigFourVersion.html
You have to add the display:block to the thead > tr and tbody
您必须将 display:block 添加到 thead > tr 和 tbody
回答by Michael Koper
Using the display:block style only works if you have 1 column. If you have multiple data columns - with multiple fields - then display:block appears to make all data columns scrollable but under the 1st column (does the same in Firefox - which is the only browser I know that does tbody scrolling nicely). Incidentally, on Firefox - you can use the overflow-x: hidden style to suppress the horizontal scroll.
使用 display:block 样式仅在您有 1 列时才有效。如果您有多个数据列 - 具有多个字段 - 然后 display:block 似乎使所有数据列可滚动，但在第一列下（在 Firefox 中也是如此 - 这是我知道的唯一一个可以很好地滚动 tbody 的浏览器）。顺便说一句，在 Firefox 上 - 您可以使用 overflow-x: hidden 样式来抑制水平滚动。
I realized that the issue I mention only occurs if you are not specifying a width for the th & td elements - if you can fix the column widths then it works. Problem for me is I can't fix the column widths.
我意识到我提到的问题只有在您没有为 th & td 元素指定宽度时才会发生 - 如果您可以修复列宽，那么它就可以工作。对我来说问题是我无法修复列宽。
回答by lsf
Try the first method of this page, pure CSS with a single table (2 divs around the table, and the thead is positionned absolute) : http://www.cssplay.co.uk/menu/tablescroll.htmlSeems to work on FF4/IE9/IE8 in addition to IE7/FF3.6.
尝试此页面的第一种方法，纯 CSS 与单个表格（表格周围 2 个 div，并且 thead 被定位为绝对）：http: //www.cssplay.co.uk/menu/tablescroll.html似乎可以使用除了 IE7/FF3.6 之外，还有 FF4/IE9/IE8。
回答by Sean Haddy
I had the same issue and wrote a jQuery script to do this for me... uses two table elements and formats the css accordingly. Hope this helps others who have the same issue...
我遇到了同样的问题，并为我编写了一个 jQuery 脚本来执行此操作...使用两个表元素并相应地格式化 css。希望这可以帮助其他有同样问题的人......
回答by Jeromy French
I saw Sean Haddy's excellent solutionand took the liberty of making some edits:
我看到了 Sean Haddy 的优秀解决方案，并冒昧地进行了一些编辑：
- Use classes instead of ID, so one jQuery script could be reused for multiple tables on one page
- Added support for semantic HTML table elements like caption, thead, tfoot, and tbody
- Made scrollbar optional so it won't appear for tables that are "shorter" than the scrollable height
- Adjusted scrolling div's width to bring the scrollbar up to the right edge of the table
- Made concept accessible by
- using aria-hidden="true" on injected static table header
- and leaving original thead in place, just hidden with jQuery and set
aria-hidden="false"
- Showed examples of multiple tables with different sizes
- 使用类而不是 ID，因此一个 jQuery 脚本可以在一页上重复用于多个表
- 添加了对语义 HTML 表格元素（如标题、thead、tfoot 和 tbody）的支持
- 使滚动条可选，因此它不会出现在比可滚动高度“短”的表格中
- 调整滚动 div 的宽度以将滚动条带到表格的右边缘
- 使概念可访问
- 在注入的静态表头上使用 aria-hidden="true"
- 并保留原来的thead，只是用jQuery隐藏并设置
aria-hidden="false"
- 显示了具有不同大小的多个表的示例
Sean did the heavy lifting, though. Thanks to Matt Burland, too, for pointing out need to support tfoot.
不过，肖恩做了繁重的工作。也感谢 Matt Burland 指出需要支持 tfoot。
Please see for yourself at http://jsfiddle.net/jhfrench/eNP2N/
回答by I.G. Pascual
A faced the same problem long ago, and I finally set out the two tables approach. This is the result: http://jsfiddle.net/bGr4V/3/, it works for all browsers (IE6+ incl).
A很久以前就遇到过同样的问题，我终于列出了两个表的方法。这是结果：http: //jsfiddle.net/bGr4V/3/，它适用于所有浏览器（IE6+ 包括）。
In this jsFiddleyou can play with a clean version.
在这个 jsFiddle 中，你可以玩一个干净的版本。
My solution was to add a fix cell<th class="fix"> </th>in theadto fill the space of the scroll bar in the tbody, then give one column a variable width (<td class="grow">), so the header fix cellwouldn't unmatch on resizing.
我的解决办法是增加一个修复细胞<th class="fix"> </th>中thead，以填补在所述滚动条的空间tbody，然后给一列的可变宽度（<td class="grow">），所以头修复细胞不会对调整大小的不匹配。
HTML:
HTML：
<div class="fixed_table">
<div class="head">
<table>
<thead>
<tr>
<th>Column header</th>
<th class="grow">Column header</th>
<th class="fix"> </th>
</tr>
</thead>
</table>
<div class="body">
<table class="full_table">
<caption class="caption">Caption</caption>
<tbody>
<tr>
<td>Data</td>
<td class="grow">Data</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
</div>
</div>
CSS:has *and _hack for ie6-7, and a -webkitspecific for the header fix-cellmatching scroll width in each case.
CSS:has *and _hack for ie6-7, and a -webkitspecific for header fix-cellmatching scroll width in each case.
.fixed_table table {
table-layout: fixed;
width: auto;
border-width: 0;
padding: 0;
border-collapse: collapse;
}
.fixed_table .body {
overflow: scroll;
overflow-x: hidden;
max-height: 10.75em;
min-height: 2.5em;
padding-bottom: 0.8em;
*padding-right: 17px; /*ie7 & ie6*/
_padding-right: 0; /*ie6*/
_height: 10em ;
}
.fixed_table th, .fixed_table td {
width: 4.7em;
}
.fixed_table .grow {
width: auto;
}
.fixed_table .fix {
width: 16px;
*width: 17px; /*ie7 & ie6*/
_width: 16px; /*ie6*/
}
/* webkit specific */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.fixed_table .fix{ width: 17px }
}
回答by TJ VanToll
Thought I'd throw my solution into the mix - http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/.
以为我会把我的解决方案混合在一起 - http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/。
It takes the same basic route as @Michael Koper's solution but includes a workaround so the table will look correct in IE back to IE6.
它采用与@Michael Koper 的解决方案相同的基本路线，但包括一个解决方法，因此该表在 IE 中看起来正确返回 IE6。
I solve the width issue by giving the <table>a table-layout: fixedand explicitly assigning width to cells in each column. Not ideal but it does produce a semantic table that will align cross browser regardless of whether a scrollbar is needed.
我通过给<table>atable-layout: fixed并明确地为每列中的单元格分配宽度来解决宽度问题。不理想，但它确实产生了一个语义表，无论是否需要滚动条，它都会对齐跨浏览器。
回答by user2030366
It may be overkill for this question, but YUI still provides possibly the best free cross-browser datatable. It can be used for read-only data as well.
这个问题可能有点矫枉过正，但 YUI 仍然可能提供最好的免费跨浏览器数据表。它也可用于只读数据。
Click on the examples there to see scrollable samples. Since, I am a newbie to stackoverflow, I can only post these two links.
单击此处的示例以查看可滚动示例。因为我是 stackoverflow 的新手，所以我只能发布这两个链接。
回答by Matthew
This is really quite hacky but maybeit will help someone somewhere...
这真的很hacky但也许它会在某个地方帮助某人......
It uses columns instead of rows so processing it would essentially be done backwards.
它使用列而不是行，因此处理它基本上是向后完成的。
Transitional DOCTYPE added for IE compatibility.
为 IE 兼容性添加了过渡 DOCTYPE。
回答by Digambar Sangavkar
I developed javascript solution for the above problem
which works only in Firefox 7+ as i have tested only in FF
I came to this thread and found solution pointed by Michael Koper
我为上述问题开发了 javascript 解决方案，该解决方案
仅适用于 Firefox 7+，因为我仅在 FF 中测试过
我来到这个线程并找到了Michael Koper指出的解决方案
In this solution three important things are done
1) fix the column width
2) thead > tr display is set to block
3) tbody display is set to block
在这个解决方案中完成了三件重要的事情
1) 固定列宽
2) thead > tr 显示设置为块
3) tbody 显示设置为块
as others have mentioned there problem to fix the width , i am also in same position;
even i cant fix the width statically
正如其他人提到的那样，固定宽度有问题，我也处于相同的位置；
即使我不能静态地固定宽度
so i thought i will fix the width dynamically ( after table is rendered in browser) and this did the trick :)
所以我想我会动态修复宽度（在浏览器中呈现表格之后），这做到了:)
following is the solution in javascript which works only in FF
( i have tested only in FF , i dont have access to other browsers )
以下是仅适用于 FF 的 javascript 解决方案
（我仅在 FF 中测试过，我无法访问其他浏览器）
function test1(){
var tbodys = document.getElementsByTagName("TBODY");
for(var i=0;i<tbodys.length;i++){
do_tbodyscroll(tbodys[i]);
}
}
function do_tbodyscroll(_tbody){
// get the table node
var table = _tbody.parentNode;
// first row of tbody
var _fr = _tbody.getElementsByTagName("TR")[0];
// first row cells ..
var _frcells = _fr.cells;
// Width array , width of each element is stored in this array
var widtharray = new Array(_frcells.length);
for(var i=0;i<_frcells.length;i++){
widtharray[i] = _frcells[i].scrollWidth;
}
// Apply width to first row
for(var i=0;i<_frcells.length;i++){
_frcells[i].width = widtharray[i];
}
// Get the Last row in Thead ...
// COLGROUPS USING COLSPAN NOT YET SUPPORTED
var thead = table.getElementsByTagName("THEAD")[0];
var _rows = thead.getElementsByTagName("TR");
var tableheader = _rows[_rows.length - 1];
var headercells = tableheader.cells;
// Apply width to header ..
for(var i=0;i<headercells.length;i++){
headercells[i].width = widtharray[i];
}
// ADD 16 Pixel of scroll bar to last column ..
headercells[headercells.length -1 ].width = widtharray[headercells.length -1] + 16;
tableheader.style.display = "block";
_tbody.style.display = "block";
}
This solutions finds out what is the width of column from browser
and set again the same width to columns ( header and first row of tbody )
after the width is set; thead > tr and tbody display is set to block
此解决方案从浏览器中找出列的宽度，
并在设置宽度后再次为列（标题和 tbody 的第一行）设置相同的宽度
；thead > tr 和 tbody 显示设置为阻止
Hope this solution is useful for all of you ..
if you can extend it to other browsers please reply to this post
希望这个解决方案对大家有用..
如果你可以将它扩展到其他浏览器，请回复这篇文章
