Question

按照指定here：

表行可以分组为表头，表脚和一个或更多桌面部分，使用THEAD，TFOOT和TBODY元素，分别。此划分使用户代理能够支持滚动桌子身体独立于桌子的头部和脚部。

我创建了following example，但它不起作用。

HTML：

<table>
    <thead>
        <tr>
            <td>Problem</td>
            <td>Solution</td>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

JS：

$(function() {
    for (var i = 0; i < 20; i++) {
        var a = Math.floor(10 * Math.random());
        var b = Math.floor(10 * Math.random());
        var row = $("<tr>").append($("<td>").html(a + " + " + b + " ="))
                           .append($("<td>").html(a + b));
        $("tbody").append(row);
    }
});

CSS：

table {
    background-color: #aaa;
}
tbody {
    background-color: #ddd;
    height: 100px;
    overflow: auto;
}
td {
    padding: 3px 10px;
}

Answer 1

缺少的部分是：

thead, tbody {
    display: block;
}

Demo

Answer 2

我在一个月前遇到类似问题的时候看过这篇文章。我需要在ui对话框内的桌子上进行y轴滚动（是的，你听到我说对了）。我很幸运，因为一个有效的解决方案很快就出现了。然而，不久之后，解决方案就开始了它自己的生命，但后来更多的是它。

将顶级元素（thead，tfoot和tbody）设置为显示块的问题在于，各个组件之间的列大小的浏览器同步很快就会丢失，并且所有内容都打包到最小的允许大小。设置列的宽度似乎是最好的操作过程，但是没有设置所有内部表组件的宽度以匹配这些列的总数，即使使用固定的表布局，标题和正文之间也会略有不同当滚动条出现时。

我的解决方案是设置所有宽度，检查是否存在滚动条，然后获取浏览器实际决定的缩放宽度，并将这些宽度复制到页眉和页脚调整最后一列宽度滚动条的大小。这样做可以为色谱柱宽度提供一些流动性。如果发生对表宽度的更改，大多数主流浏览器将相应地自动缩放tbody列宽。剩下的就是从它们各自的tbody大小设置页眉和页脚列宽。

$table.find("> thead,> tfoot").find("> tr:first-child")
    .each(function(i,e) {
        $(e).children().each(function(i,e) {
            if (i != column_scaled_widths.length - 1) {
                $(e).width(column_scaled_widths[i] - ($(e).outerWidth() - $(e).width()));
            } else {
                $(e).width(column_scaled_widths[i] - ($(e).outerWidth() - $(e).width()) + $.position.scrollbarWidth());
            }
        });
    });

这个小提琴说明了这些概念：http://jsfiddle.net/borgboyone/gbkbhngq/。

请注意，单独的y轴滚动不需要表包装器或其他表。（X轴滚动确实需要一个包装表。）如果遇到标题或主体列的最小包大小，主体和标题的列大小之间的同步仍将丢失。如果调整大小是一个选项或预期小的表格宽度，则应提供最小宽度的机制。

这个起点的最终结果在这里完全实现：http://borgboyone.github.io/jquery-ui-table/

一个。

Answer 3

试试这个。

table 
{
    background-color: #aaa;
}

tbody 
{
    background-color: #ddd;
    height: 100px;
    overflow-y: scroll;
    position: absolute;
}

td 
{
    padding: 3px 10px;
    color: green;
    width: 100px;
}

Answer 4

thead {
  position: fixed;
  height: 10px; /* This is whatever height you want */
}
  tbody {
  position: fixed;
  margin-top: 10px; /* This has to match the height of thead */
  height: 300px; /* This is whatever height you want */
}

Answer 5

强制性部分：

MAX(prod_prices.sell_price) AS max_sale_price,

如何独立于“thead”滚动表格的“tbody”？

5 个答案: