使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来修复它?

这是一个工作的例子:

http://www.imaputz.com/cssStuff/bigFourVersion.html

您必须将display:block添加到thead> tr和tbody

使用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。 希望这可以帮助其他有同样问题的人…

http://jsfiddle.net/pe295/1/

我看到了肖恩·哈迪(Sean Haddy) 出色的解决scheme ,并冒昧地做出了一些修改 :

  • 使用类而不是ID,所以一个jQuery脚本可以在一个页面上重复使用多个表
  • 增加了对标题,thead,tfoot和tbody等语义HTML表格元素的支持
  • 使滚动条可选,所以它不会出现在比可滚动高度“更短”的表格中
  • 调整滚动div的宽度,使滚动条上升到桌子的右边缘
  • 制造概念可以通过
    • 在注入的静态表头上使用aria-hidden =“true”
    • 并保留原来的地方,只是用jQuery隐藏,并设置aria-hidden="false"
  • 展示了不同大小的多个表格的例子

尽pipe肖恩做了沉重的举动。 感谢Matt Burland也指出需要支持tfoot。

请亲自看看http://jsfiddle.net/jhfrench/eNP2N/

早就面临同样的问题了,最后我列出了两张表的方法。 这是结果: 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

这真的很不好意思,但也许会帮助别人…

http://jsfiddle.net/yUHCq/1/

它使用列而不是行,所以处理它基本上是向后做的。

为IE兼容性添加了过渡DOCTYPE。

对于这个问题可能是过度的,但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>