0

这是我的代码：

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

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

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

4

2 回答 2

3

只需给表格的 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

于 2013-08-15T05:40:33.227 回答
1

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

jQuery.scrollTableBody (GitHub)

只要您有一张带有正确<thead>、<tbody>和 (optional)的表格<tfoot>，您需要做的就是：

$('table').scrollTableBody();
于 2013-09-24T05:30:35.790 回答