HTML 中的表格未按需要显示

Question

尝试创建可滚动的表格。

但它显示为：。

我想要： 滚动。

我试过了：

<style>
table.scroll tbody,
table.scroll thead { display: block; }



table.scroll tbody {
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}

</style>
<script>
// Change the selector if needed
var $table = $('table.scroll'),
    $bodyCells = $table.find('tbody tr:first').children(),
    colWidth;

// Adjust the width of thead cells when window resizes
$(window).resize(function() {
    // Get the tbody columns width array
    colWidth = $bodyCells.map(function() {
        return $(this).width();
    }).get();

    // Set the width of thead columns
    $table.find('thead tr').children().each(function(i, v) {
        $(v).width(colWidth[i]);
    });    
}).resize(); // Trigger resize handler
</script>

我想要一个有滚动效果的表格tbody

Answer 1

您正确对齐所有内容，但忘记为主表提供宽度 这就是您确实获得所需输出的原因 试试

table.scroll,table{width:100%;}

这会给表格一个完整的宽度，你会得到所需的输出

Answer 2

试着把css放在下面

table
{
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

这可能有效。