如何在表格正文中添加滚动条？答案

【问题标题】：How to add a scroll bar in the body of the table?如何在表格正文中添加滚动条？
【发布时间】：2017-08-10 02:38:11
【问题描述】：

这是我的代码：

我需要在表格的正文中添加一个滚动条，表头必须保持不变。如果我添加滚动条，身体细胞将无法正确修复。

<table width="600" border="1" style="border-collapse:collapse; border: 1px solid #AEAEAE;" cellpadding="0" cellspacing="0">
<tr>
    <th rowspan="2">
        Title
    </th>
    <th rowspan="2">
        Title
    </th>
    <th colspan="4">
        Title
    </th>
    <th colspan="2">
        Title
    </th>


</tr>
<tr>
    <th>
        Title
    </th>
    <th>
       Title
    </th>
    <th>
        Title
    </th>
    <th>
        Title
    </th>
    <th>
        Title
    </th>
    <th>
        Title
    </th>

</tr>

        <td height="400">
            Body
        </td>
        <td>
            Body
        </td>
        <td>
            Body
        </td>
        <td>
            Body
        </td>
        <td>
            Body
        </td>
        <td>
            Body
        </td>
        <td>
            Body
        </td>
        <td>
            Body
        </td>
    </tr>

【问题讨论】：

在发布时将 HTML 缩进四个空格，以便它显示为代码块。您可以选择您的代码并点击格式栏中的 { } 按钮来缩进它。

标签： html scroll html-table scrollbar

【解决方案1】：

只需给表格的 tbody 元素一个高度和一个滚动溢出。像这样：

.tableClass tbody
{
     height: 300px; /* Random number I chose */
     overflow: scroll /* you can be more specific and use overflow-y */
}

编辑：我看到了您的代码，但您没有使用 tbody> 和 thead>。阅读有关它们的信息。总体思路是用一个元素包裹表格的内容，用一个元素包裹表格的标题。

这是一个工作示例： http://www.imaputz.com/cssStuff/bigFourVersion.html

【讨论】：

感谢您的回答，但该代码适用于三列，请查看我发布的示例。
@Ronnie：你有多少列并不重要。阅读我的编辑

【解决方案2】：

我找到的其他解决方案都没有满足我的所有要求，因此我创建了一个非常轻量级的 jQuery 插件来完成此操作。它支持固定页眉、页脚、列跨度 (colspan)、调整大小以及在滚动开始之前显示的可选行数。

jQuery.scrollTableBody (GitHub)

只要您有一个正确的<thead>、<tbody> 和（可选）<tfoot> 的表，您需要做的就是：

$('table').scrollTableBody();

【讨论】：