Question

我有一张桌子：

<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内容滚动？

* 注意我只想滚动tbody（或tr内的tbody内容），而不是thead或其内容*

* 编辑：更新* 对于那些感兴趣的人，我最终将其拆分为两个相同的表格，然后将tbody的表格包裹在overflow:auto中，并将thead与position:fixed分开对齐

Answer 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;}

Fiddle

Answer 2

可能是这样的：

<table class="list-table">
  <thead><tr><th>header</th></tr></thead>
  <tbody>
    <tr>
      <td>
        <div class="col-sm-3 col-sm-offset-9" style="top:80px; bottom:20px; height:400px;overflow-y:auto;">
          <table>
            <tr><td>Single row of glorious table content</td></tr>  // Repeat me x100
          </table>
        </div>
      </td>
    </tr>
  </tbody>

当然，如果您有多个td，则可能需要手动设置所有宽度以使它们保持正确对齐。

Ugly fiddle demo

Answer 3

你可以把它包装成div。

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

如果innertable没有边距或填充或任何性质的东西，它应该看起来像原始表的一部分。

Answer 4

为你的tbody添加样式有溢出：auto，overflow-x：scroll，overflow-y：scroll

用户最适合你的。如果你使用tbody一个固定的高度，只有tbody会滚动而不是thead。

如何在表格元素中设置滚动

4 个答案: