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

我有一张桌子：

<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中的tbody或tr内容，而不想滚动theador及其内容*

*编辑：更新*

---

对于那些感兴趣的人，我最终将其拆分为两个相同的表，然后用溢出：auto将表与tbody包装在一起，并将thead分别与位置对齐：fixed

您可以将其包装在div中

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

---

如果innertable没有边距、填充或任何类似的内容，它应该看起来像原始表格的一部分。

我认为这将对您有很大帮助

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

---

为您的tbody添加样式有overflow:auto、overflow-x:scroll、overflow-y:scroll

使用最适合你的东西。

---

如果使用固定高度的tbody，则只有tbody会滚动，而不是thead。

可能是这样的：

<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，您可能必须手动设置它们的所有宽度，以保持它们正确对齐

---

不，你不能，你不能在不改变其显示属性的情况下让tbody内容滚动，这是一个坏主意。也许可以找一个jquery网格插件，你可以试试YUI datatable和可滚动的body-@MoazzamKhan为什么这是一个坏主意？@alias51这可能会有帮助：这会滚动thead内容谢谢，但似乎不起作用。表中的div在单元格外，语义正确吗？@alias51 div在单元格内。该表正好有一个单元格，其中包含div@Biswajit你以前做过吗？身体与头部不对齐。同样，头部覆盖了身体的一部分。我认为这里的问题是高度是由父元素设置的，这意味着这种方法不起作用？

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