web-dev-qa-db-ja.com

WebkitブラウザーでTBODYをスクロール可能にする

この質問 を知っていますが、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ブラウザーでも機能しません。 バグレポート がありますが、これは優先度が高くないと思われます（6月5日報告）。

私の質問は、実際に機能する代替戦略はありますか？ 2つのテーブルを使用した方法を試しましたが、ヘッダーがコンテンツと一致することを保証することはできません。 Webkitが修正するのを待つだけですか？

htmlcsswebkit
69
Andrew Ensley

これが実際の例です：

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

Display：blockをtheadに追加する必要があります> trおよびtbody

33
Michael Koper

Display：blockスタイルの使用は、1列の場合にのみ機能します。複数のフィールドを持つ複数のデータ列がある場合、display：blockが表示され、すべてのデータ列がスクロール可能になりますが、最初の列の下に表示されます（Firefoxでも同じです-私が知っている唯一のブラウザはうまくスクロールします）ちなみに、Firefoxでは、overflow-x：hiddenスタイルを使用して、水平スクロールを抑制できます。

私が言及した問題は、th＆td要素の幅を指定していない場合にのみ発生することに気付きました-列の幅を修正できれば機能します。私にとっての問題は、列の幅を修正できないことです。

17
Martin

このページの最初の方法である、単一のテーブル（テーブルの周りに2つのdiv、そしてtheadが絶対に配置されている）を持つ純粋なCSSを試してください： http://www.cssplay.co.uk/menu/tablescroll.html IE7/FF3.6に加えてFF4/IE9/IE8でも動作するようです。

12
lsf

私はショーン・ハディの 優秀な解決策 を見て、 編集を行う の自由を取りました：

  • IDではなくクラスを使用して、1つのページの複数のテーブルで1つのjQueryスクリプトを再利用できるようにします
  • Caption、thead、tfoot、tbodyなどのセマンティックHTMLテーブル要素のサポートが追加されました
  • スクロールバーをオプションにして、スクロール可能な高さよりも「短い」テーブルには表示されないようにしました
  • スクロールdivの幅を調整して、スクロールバーをテーブルの右端に移動しました
  • コンセプトにアクセスできるようにしました
    • 挿入された静的テーブルヘッダーでaria-hidden = "true"を使用する
    • 元のtheadをそのまま残し、jQueryで非表示にし、aria-hidden="false"
  • サイズの異なる複数のテーブルの例を示した

しかし、ショーンは重荷を持ち上げました。 tfootをサポートする必要性を指摘してくれたMatt Burlandにも感謝します。

http://jsfiddle.net/jhfrench/eNP2N/ で自分の目で確かめてください

5
Jeromy French

私は同じ問題を抱えていて、これを行うjQueryスクリプトを書きました... 2つのテーブル要素を使用し、それに応じてcssをフォーマットします。これが同じ問題を抱えている他の人に役立つことを願っています...

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

5
Sean Haddy

Aはずっと前に同じ問題に直面し、私はついに2つのテーブルのアプローチを始めました。これが結果です： http://jsfiddle.net/bGr4V/3/ 、すべてのブラウザー（IE6 +を含む）で動作します。

this jsFiddle では、クリーンバージョンで遊ぶことができます。

私の解決策は、theadのfix cell_<th class="fix"> </th>_を追加して、tbodyのスクロールバーのスペースを埋めることでした。 、1つの列に可変幅（_<td class="grow">_）を指定すると、ヘッダーfix cellはサイズ変更時に不一致になりません。

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_がありますfix-cellそれぞれの場合に一致するスクロール幅。

_.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 }
}
_
3
I.G. Pascual

私のソリューションをミックスに投げ込むと思った- http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/ 。

@Michael Koperのソリューションと同じ基本的なルートを使用しますが、回避策が含まれているため、IE IE6に戻るとテーブルが正しく表示されます。

<table>にtable-layout: fixedを指定し、各列のセルに幅を明示的に割り当てることにより、幅の問題を解決します。理想的ではありませんが、スクロールバーが必要かどうかに関係なくクロスブラウザを調整するセマンティックテーブルを作成します。

デモ： http://codepen.io/tjvantoll/pen/JEKI

2
TJ VanToll

この質問ではやり過ぎかもしれませんが、YUIは依然として最高の無料のクロスブラウザデータテーブルを提供します。読み取り専用データにも使用できます。

YUI 2 DataTable

YUI 3 DataTable

スクロール可能なサンプルを表示するには、サンプルをクリックしてください。私はstackoverflowの初心者なので、これらの2つのリンクしか投稿できません。

1
user2030366

これは本当にかなりハッキーですが、多分それは誰かを助けるでしょう...

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

行の代わりに列を使用するため、基本的に逆方向に処理されます。

IE互換性のために追加された移行DOCTYPE。

1
Matthew

上記の問題に対するjavascriptソリューションを開発しました
Firefox 7以降でのみ動作します。FFでのみテストしています。

私はこのスレッドに来て、解決策を見つけました マイケル・コペル

このソリューションでは、3つの重要なことが行われます
1）列幅を修正する
2）thead> tr表示はブロックに設定されます
3）tbodyディスプレイはブロックに設定されています

他の人が幅を修正する問題があると述べたように、私も同じ位置にいます;
幅を静的に固定することさえできません

だから私は（テーブルがブラウザでレンダリングされた後に）幅を動的に修正すると思ったが、これはトリックをした:)

以下は、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";  
        }

このソリューションは、ブラウザからの列の幅を調べます
列に再度同じ幅を設定します（ヘッダーとtbodyの最初の行）
幅の設定後。 thead> trおよびtbody表示はブロックに設定されます

このソリューションが皆さんにとって役立つことを願っています..
他のブラウザに拡張できる場合は、この投稿に返信してください

1
Digambar Sangavkar

テーブルをそのまま描画し、各列の幅を計算して、各見出しに設定します。見出しは分割で作成され、テーブルを自由にスクロールさせることができます。

<!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>
0
Salitha Prasad

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>
0
mmcglynn

誰かがIE quirksモードで動作する必要がある場合、ここでI.G. 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>
0
Ronen Festinger

IE5 +、Firefox、Chromeで動作する例がここにあります。ただし、固定幅の列を使用します。 http://www.cssplay.co.uk/menu/tablescroll.html

0
user1491819