在Webkit浏览器中使TBODY可滚动

时间:2009-06-19 20:36:16

标签: html css webkit

我知道this question,但没有一个答案适用于Safari,Chrome等。

接受的策略(as demonstrated here)是设置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浏览器中都不起作用。关于它的bug report似乎并不是一个高优先级(据报道,2005年6月)。

所以我的问题是:是否有其他策略确实有效?我尝试过双表方法,但是不可能保证标题与内容对齐。我只需要等待Webkit修复它吗?

13 个答案:

答案 0 :(得分:32)

这是一个有效的例子:

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

您必须将display:block添加到thead&gt; tr和tbody

答案 1 :(得分:17)

使用display:block样式仅在有1列时才有效。如果你有多个数据列 - 有多个字段 - 那么display:block似乎可以使所有数据列都可滚动但在第一列下(在Firefox中也是如此 - 这是我知道的唯一一个可以很好地滚动的浏览器)。顺便说一下,在Firefox上 - 您可以使用overflow-x:hidden样式来抑制水平滚动。

我意识到我提到的问题只会在你没有指定th&amp;的宽度时出现。 td元素 - 如果你可以修复列宽,那么它可以工作。对我来说问题是我无法修复列宽。

答案 2 :(得分:12)

尝试这个页面的第一个方法,带有单个表的纯CSS(表格周围有两个div,并且thead绝对定位):http://www.cssplay.co.uk/menu/tablescroll.html 除了IE7 / FF3.6之外,似乎可以在FF4 / IE9 / IE8上工作。

答案 3 :(得分:5)

我有同样的问题并编写了一个jQuery脚本来为我做这个...使用两个表元素并相应地格式化css。希望这能帮助那些有同样问题的人......

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

答案 4 :(得分:5)

我看到了Sean Haddy的excellent solution并取得了making some edits的自由:

  • 使用类而不是ID,因此可以重用一个jQuery脚本 一页上有多个表格
  • 添加了对caption,thead,tfoot和tbody
  • 等语义HTML表格元素的支持
  • 使滚动条可选,因此对于比可滚动高度
  • “更短”的表格不会显示
  • 调整滚动div的宽度,使滚动条向上移动到表格的右边缘
  • 制作概念
    • 在注入的静态表头
    • 上使用aria-hidden =“true”
    • 并保留原始thead,只需使用jQuery隐藏并设置aria-hidden="false"
  • 显示了不同大小的多个表的示例
然而,肖恩完成了繁重的工作。感谢Matt Burland,也指出需要支持tfoot。

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

答案 5 :(得分:3)

很久以前面临同样的问题,我终于提出了两种表的方法。结果如下:http://jsfiddle.net/bGr4V/3/,它适用于所有浏览器(IE6 + incl)。

this jsFiddle中,您可以使用干净的版本。

我的解决方案是在<th class="fix"> </th>中添加修复单元 thead以填充tbody中滚动条的空间,然后为一列添加一个可变宽度(<td class="grow">),因此标题修复单元格在调整大小时不会匹配。

<强> 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有*_黑客攻击,并且标题修复单元格-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 }
}

答案 6 :(得分:2)

以为我会把我的解决方案投入混合 - http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/

它采用与@Michael Koper解决方案相同的基本路线,但包含一个解决方法,因此该表在IE中看起来正确回到IE6。

我通过给<table>一个table-layout: fixed并明确地为每列中的单元格指定宽度来解决宽度问题。不太理想,但它确实产生了一个语义表,无论是否需要滚动条,都会对齐浏览器。

演示:http://codepen.io/tjvantoll/pen/JEKIu

答案 7 :(得分:1)

我针对上述问题开发了javascript解决方案 这只适用于Firefox 7+,因为我只在FF中测试过
我来到这个主题并找到 Michael Koper

指出的解决方案

在这个解决方案中,完成了三件重要事情 1)固定柱宽
2)thead&gt; tr显示设置为阻止
3)tbody显示设置为阻止

正如其他人提到的那样,确定宽度存在问题,我也处于同一位置;
即使我不能静态修复宽度

所以我想我会动态修复宽度(在浏览器中呈现表格之后) 这就是诀窍:))

以下是javascript中仅适用于FF的解决方案 (我只在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";  
        }

此解决方案找出浏览器中列的宽度为什么 并再次设置相同的宽度到列(标题和tbody的第一行)
设定宽度后; thead&gt; tr和tbody显示设置为阻止

希望这个解决方案对你们所有人都有用。
如果您可以将其扩展到其他浏览器,请回复此帖子

答案 8 :(得分:1)

这真的非常hacky但也许它会帮助某个人......

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

它使用列而不是行,因此处理它基本上是向后完成的。

为IE兼容性添加了Transitional DOCTYPE。

答案 9 :(得分:1)

这个问题可能有些过分,但YUI仍然提供最好的免费跨浏览器数据表。它也可以用于只读数据。

YUI 2 DataTable

YUI 3 DataTable

单击那里的示例以查看可滚动样本。既然,我是stackoverflow的新手,我只能发布这两个链接。

答案 10 :(得分:0)

添加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>

答案 11 :(得分:0)

这里有一个例子适用于IE5 +,Firefox和Chrome。但是,它使用固定宽度的列。 http://www.cssplay.co.uk/menu/tablescroll.html

答案 12 :(得分:0)

让表格按照它的方式绘制并计算每列的宽度并将其设置为每个标题。标题是用分区制作的,然后我们可以让桌子自由滚动。

<!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>