Question

这是我的代码：

我需要在表格的主体中添加滚动条，标题必须保持不变。如果添加滚动条，则正文单元格无法正确固定。

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

Answer 1

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

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

修改：我看到了您的代码而您没有使用＆lt; tbody＆gt;和＆lt; thead＆gt;。了解他们。一般的想法是用一个元素包装表的内容，并用一个元素包装表的标题。

这是一个有效的例子： http://www.imaputz.com/cssStuff/bigFourVersion.html

Answer 2

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

jQuery.scrollTableBody (GitHub)

只要您的表格包含正确的<thead>，<tbody>和（可选）<tfoot>，您只需要这样做：

$('table').scrollTableBody();

如何在表格的主体中添加滚动条？

2 个答案: