使TBODY在Webkit浏览器中可滚动
我知道这个问题 ，但没有答案在Safari，Chrome等工作。
接受的策略（ 如这里所示 ）是设置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> 不幸的是，这在任何webkit浏览器中都不起作用。 有一个关于它的错误报告似乎并不是一个高度优先的事情（05年6月报道）。
所以我的问题是：是否有替代策略实际上工作？ 我已经尝试了两个表的方法，但是不可能保证标题将与内容alignment。 我只需要等待Webkit来修复它？
使用display：block样式只有在有1列的情况下才有效。 如果你有多个数据列 – 有多个字段 – 然后显示：block显示为使所有数据列都可以滚动，但在第一列下（在Firefox中也是这样 – 这是我知道的唯一一个浏览器，它不会很好地滚动）。 顺便说一下，在Firefox上 – 你可以使用overflow-x：hidden style来抑制水平滚动。
我意识到我提到的问题只会发生，如果你没有指定一个宽度th＆td元素 – 如果你可以修复列的宽度，那么它的作品。 问题是我无法修复列的宽度。
尝试这个页面的第一个方法，纯CSS与单个表（2表格周围的div和thead是绝对定位）： http : //www.cssplay.co.uk/menu/tablescroll.html似乎工作FF4 / IE9 / IE8除了IE7 / FF3.6之外。
我有同样的问题，并写了一个jQuery脚本来做到这一点…使用两个表格元素和相应的格式的CSS。 希望这可以帮助其他有同样问题的人…
我看到了肖恩·哈迪（Sean Haddy） 出色的解决scheme ，并冒昧地做出了一些修改 ：
- 使用类而不是ID，所以一个jQuery脚本可以在一个页面上重复使用多个表
- 增加了对标题，thead，tfoot和tbody等语义HTML表格元素的支持
- 使滚动条可选，所以它不会出现在比可滚动高度“更短”的表格中
- 调整滚动div的宽度，使滚动条上升到桌子的右边缘
- 制造概念可以通过
- 在注入的静态表头上使用aria-hidden =“true”
- 并保留原来的地方，只是用jQuery隐藏，并设置
aria-hidden="false"
- 展示了不同大小的多个表格的例子
尽pipe肖恩做了沉重的举动。 感谢Matt Burland也指出需要支持tfoot。
早就面临同样的问题了，最后我列出了两张表的方法。 这是结果： http : //jsfiddle.net/bGr4V/3/ ，它适用于所有浏览器（IE6 + incl）。
在这个jsFiddle你可以玩一个干净的版本。
我的解决scheme是在add中添加一个修复的单元格来填充tbody滚动条的空间，然后给出一个可变宽度的列（ <td class="grow"> ），所以头部修复单元格在resize时不会失败。
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：在ie6-7中有*和_ hack，而在每种情况下，头文件固定单元匹配滚动宽度都是-webkit 。
.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 } }
以为我会把我的解决scheme，混合 – http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/ 。
它采用@Michael Koper的解决scheme相同的基本路线，但包括一个解决方法，以便IE浏览器在IE6中看起来正确。
我通过给<table> table-layout: fixed解决了宽度问题table-layout: fixed并明确地分配每个列中的单元格的宽度。 不理想，但它确实产生了一个语义表，它将alignment跨浏览器，无论是否需要滚动条。
演示： http : //codepen.io/tjvantoll/pen/JEKIu
我为上述问题开发了javascript解决scheme
它只在Firefox 7 +中起作用，因为我只在FF中testing过
我来到这个线程，find了Michael Koper指出的解决scheme
在这个解决scheme中，完成了三件重要的事
1）修复列宽
2）ad> tr显示被设置为阻止
3）tbody显示被设置为阻止
正如其他人所说的那样，修正宽度的问题，我也处于相同的位置;
即使我不能修复宽度静态
所以我想我会dynamic修复宽度（表格呈现在浏览器之后），这就做了诀窍:)
以下是JavaScript中的解决scheme，只能在FF中使用
（我只testingFF，我没有访问其他浏览器）
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"; }
这个解决scheme找出浏览器的列宽是多less
并再次设置相同的宽度列（tbody的标题和第一行）
宽度设置后; thead> tr和tbody显示设置为阻止
希望这个解决scheme对你们所有人都有用。
如果你可以扩展到其他浏览器，请回复这个post
对于这个问题可能是过度的，但YUI仍然提供了最好的免费跨浏览器数据表。 它也可以用于只读数据。
YUI 2数据表
YUI 3 DataTable
点击那里的例子来查看可滚动的样本。 既然，我是一个新手来stackoverflow，我只能发布这两个链接。
添加display:block; 这也将消除FireFox中的不必要的水平滚动。 毫无疑问，你也知道这两个例子都不适用于MSIE 8。
<table> <thead> <tr><th>This is the header and doesn't scroll</th></tr> </thead> <tbody style="height:100px; overflow:auto;display:block;"> <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>
这里有一个例子，适用于IE5 +，Firefox和Chrome。 但是，它使用固定宽度的列。 http://www.cssplay.co.uk/menu/tablescroll.html
如果有人需要它工作在IE怪癖模式，这里是我如何改变和简化IG Pascual的代码工作：
.fixed_table{ overflow: scroll; overflow-x: hidden; max-height: 300px; height: 300px; min-height: 50px; padding-right:0; } #datatable td { padding:3px; text-align: center; width: 9%; vertical-align: middle; background-color: #343435; color: #E0E0E3; overflow:hidden; } <div class="head"> <table> <thead> <tr> <th>Time (GMT)</th> <th>Price</th> </tr> </thead> </table> </div> <div class="fixed_table"> <table id="datatable" cellspacing="1" cellpadding="1"> <tbody></tbody> </table> </div>
让表格按原样绘制并计算每列的宽度并将其设置到每个标题中。 标题是用分区制作的，然后我们可以让桌面自由滚动。
<!DOCTYPE html> <html> <head> <style> .t_heading{ margin-top: 20px; font-family: Verdana, Geneva, sans-serif; background-color: #4CAF50; } .heading{ background-color: #4CAF50; color: white; float:left; padding: 8px 0PX 8PX 0PX; border-bottom: 1px solid #ddd; height: 20px; text-align: left; } .t_data{ overflow-y: scroll; overflow-x: hidden; height:0px; width: 100%; } .t_content{ border-collapse: collapse; font-family: Verdana, Geneva, sans-serif; width: 100%; } .column1,.column2,.column3,.column4{ padding: 8px 0PX 8PX 0PX; text-align: left; border-bottom: 1px solid #ddd; } .t_row:hover{ background-color:#f5f5f5; } </style> <script> function setBody(){ var body = document.body, html = document.documentElement; var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight ); height = height-300; /* ** By changing the subtraction value, You can fit the table in to the screen correctly. ** Make sure not to come the hscroll. ** Or you can set fixed height with css for the div as your wish. */ document.getElementById("t_data").style.height = height+"px"; setColumnWidth("column1"); setColumnWidth("column2"); setColumnWidth("column3"); setColumnWidth("column4"); } function setColumnWidth(o){ var object = o; var x = document.getElementsByClassName(object); var y = x[0].clientWidth; document.getElementById(object).style.width = y+"px"; } </script> </head> <body onload="setBody()"> <div class="t_heading"> <div class="heading" id="column1">Heading 1</div> <div class="heading" id="column2">Heading 2</div> <div class="heading" id="column3">Heading 3</div> <div class="heading" id="column4">Heading 4</div> </div> <div class="t_data" id="t_data"> <table class="t_content"> <tr class='t_row'> <td class='column1'>Column1 Row 0</td> <td class='column2'>Column2 Row 0</td> <td class='column3'>Column3 Row 0</td> <td class='column4'>Column4 Row 0</td> </tr><tr class='t_row'> <td class='column1'>Column1 Row 1</td> <td class='column2'>Column2 Row 1</td> <td class='column3'>Column3 Row 1</td> <td class='column4'>Column4 Row 1</td> </tr><tr class='t_row'> <td class='column1'>Column1 Row 2</td> <td class='column2'>Column2 Row 2</td> <td class='column3'>Column3 Row 2</td> <td class='column4'>Column4 Row 2</td> </tr><tr class='t_row'> <td class='column1'>Column1 Row 3</td> <td class='column2'>Column2 Row 3</td> <td class='column3'>Column3 Row 3</td> <td class='column4'>Column4 Row 3</td> </tr><tr class='t_row'> <td class='column1'>Column1 Row 4</td> <td class='column2'>Column2 Row 4</td> <td class='column3'>Column3 Row 4</td> <td class='column4'>Column4 Row 4</td> </tr><tr class='t_row'> <td class='column1'>Column1 Row 5</td> <td class='column2'>Column2 Row 5</td> <td class='column3'>Column3 Row 5</td> <td class='column4'>Column4 Row 5</td> </tr><tr class='t_row'> <td class='column1'>Column1 Row 6</td> <td class='column2'>Column2 Row 6</td> <td class='column3'>Column3 Row 6</td> <td class='column4'>Column4 Row 6</td> </tr><tr class='t_row'> <td class='column1'>Column1 Row 7</td> <td class='column2'>Column2 Row 7</td> <td class='column3'>Column3 Row 7</td> <td class='column4'>Column4 Row 7</td> </tr><tr class='t_row'> <td class='column1'>Column1 Row 8</td> <td class='column2'>Column2 Row 8</td> <td class='column3'>Column3 Row 8</td> <td class='column4'>Column4 Row 8</td> </tr><tr class='t_row'> <td class='column1'>Column1 Row 9</td> <td class='column2'>Column2 Row 9</td> <td class='column3'>Column3 Row 9</td> <td class='column4'>Column4 Row 9</td> </tr><tr class='t_row'> <td class='column1'>Column1 Row 10</td> <td class='column2'>Column2 Row 10</td> <td class='column3'>Column3 Row 10</td> <td class='column4'>Column4 Row 10</td> </tr> <!-- <?php $data = array(); for($a = 0; $a<50; $a++) { $data[$a] = array(); $data[$a][0] = "Column1 Row ".$a; $data[$a][1] = "Column2 Row ".$a; $data[$a][2] = "Column3 Row ".$a; $data[$a][3] = "Column4 Row ".$a; } /* ** supose you have data in an array.. which red from database. The table will draw using array data. Or you can draw the table manualy. ** tip: If using manual table, No need of ** 'var x = document.getElementsByClassName(object); var y = x[0].clientWidth;'. ** You can just set ID of first row's cells in to some name and use it to read width. */ for($i=0;$i<sizeof($data);$i++){ echo "<tr class='t_row'><td class='column1'>".$data[$i][0]."</td><td class='column2'>".$data[$i][1]."</td><td class='column3'>".$data[$i][2]."</td><td class='column4'>".$data[$i][3]."</td></tr>"; } ?> --> </table> </div> </body> </html>
