-1

私はテーブルを持っています：

<table class="list-table">
  <thead><tr><th>header</th></tr></thead>
  <tbody>

   <tr><td>Single row of glorious table content</td></tr>  // Repeat me x100

  </tbody>
</table>

このテーブルは、固定の高さを与えるために div でラップされています。

   <div class="col-sm-3 col-sm-offset-9" style="top:80px; bottom:20px;">

   <table>
   ...
   </table>

   </div>

ここで質問: TR の繰り返しがこの固定の高さを超えた場合、どのように使用overflow:auto(または同等のもの) を使用してコンテンツをスクロールさせることができますか?tbody

*注: またはその内容ではなく、 (または内の内容) のみをスクロールしたい*tbodytrtbodythead

*編集: 更新 * 興味のある方のために、これを 2 つの同一のテーブルに分割してから、テーブルを でラップし、別々に でtbody整列overflow:autoさせました。theadposition:fixed

4

4 に答える 4

1

これは大いに役立つと思います

あなたのhtmlで

    <table>
<thead><tr><th>header</th></tr></thead>
  <tbody>
   <tr><td>Single row</td></tr>  
   <tr><td>Single row</td></tr>  
   <tr><td>Single row</td></tr>  
   <tr><td>Single row</td></tr>  
   <tr><td>Single row</td></tr>  
   <tr><td>Single row</td></tr>  
   <tr><td>Single row</td></tr>  
   <tr><td>Single row</td></tr>  
   <tr><td>Single row</td></tr>  
   <tr><td>Single row</td></tr>  
   <tr><td>Single row</td></tr>  
  </tbody>
</table>

そしてあなたのCSSで

table {width:100%; border:1px solid #000000;}
thead {background-color:#000268;color:#FFFFFF;text-align:center; position:fixed; top:0px;}
thead th { height:50px;width:1000px; text-align:center;border-width: 1px;border-style: outset;}
tbody {color:#000000;text-align:center; height:150px; overflow: scroll; margin-top:00px;}
tbody td { height:60px; border-width: 1px;border-style: outset;}

フィドル

于 2013-09-06T19:59:50.003 に答える
0

divでラップできます。

    <table>
       <thead>...</thead>
       <tbody><tr><td>
       <div style = "overflow:auto">
         //table without the header here
       </div>
       </td></tr></tbody>
    </table>

内部テーブルにマージンやパディング、またはそのような性質のものがない場合、元のテーブルの一部のように見えるはずです。

于 2013-09-06T19:59:24.500 に答える
0

tbody にスタイルを追加する オーバーフローがあります: auto、overflow-x:scroll、overflow-y:scroll

あなたに最も適したものを使用してください。tbody を固定の高さで使用すると、tbody のみがスクロールされ、広告はスクロールされません。

于 2013-09-06T20:00:34.967 に答える