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

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

*编辑：更新 * 对于那些感兴趣的人，我最终把它分成两个相同的表，然后用 a 包装表并用tbodya分别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 回答
1

大概是这样的：

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

当然，如果您有多个tds，您可能必须手动设置它们的所有宽度以保持它们正确对齐。

丑陋的小提琴演示

于 2013-09-06T20:05:08.550 回答
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 会滚动而不是 thead。

于 2013-09-06T20:00:34.967 回答