制表符：在同一页面中冻结多个制表符的标题而不固定高度

Question

我的网页有超过 3 个制表符，表格之间的图表也很少。

根据要求，我们不固定表格的大小。因此，根据数据，表格高度会有所不同。

我想修复 UI 中表格的标题。这样在垂直滚动时，标题将保持固定，仅滚动数据。

var tabledata = [
    {id:1, name:"Oli Bob", progress:12, gender:"male", rating:1, col:"red", dob:"19/02/1984", car:1},
    {id:2, name:"Mary May", progress:1, gender:"female", rating:2, col:"blue", dob:"14/05/1982", car:true},
    {id:3, name:"Christine Lobowski", progress:42, gender:"female", rating:0, col:"green", dob:"22/05/1982", car:"true"},
    {id:4, name:"Brendon Philips", progress:100, gender:"male", rating:1, col:"orange", dob:"01/08/1980"},
    {id:5, name:"Margret Marmajuke", progress:16, gender:"female", rating:5, col:"yellow", dob:"31/01/1999"},
    {id:6, name:"Frank Harbours", progress:38, gender:"male", rating:4, col:"red", dob:"12/05/1966", car:1},
    {id:1, name:"Oli Bob", progress:12, gender:"male", rating:1, col:"red", dob:"19/02/1984", car:1},
    {id:2, name:"Mary May", progress:1, gender:"female", rating:2, col:"blue", dob:"14/05/1982", car:true},
    {id:3, name:"Christine Lobowski", progress:42, gender:"female", rating:0, col:"green", dob:"22/05/1982", car:"true"},
    {id:4, name:"Brendon Philips", progress:100, gender:"male", rating:1, col:"orange", dob:"01/08/1980"},
    {id:5, name:"Margret Marmajuke", progress:16, gender:"female", rating:5, col:"yellow", dob:"31/01/1999"},
    {id:6, name:"Frank Harbours", progress:38, gender:"male", rating:4, col:"red", dob:"12/05/1966", car:1},
    {id:1, name:"Oli Bob", progress:12, gender:"male", rating:1, col:"red", dob:"19/02/1984", car:1},
    {id:2, name:"Mary May", progress:1, gender:"female", rating:2, col:"blue", dob:"14/05/1982", car:true},
    {id:3, name:"Christine Lobowski", progress:42, gender:"female", rating:0, col:"green", dob:"22/05/1982", car:"true"},
    {id:4, name:"Brendon Philips", progress:100, gender:"male", rating:1, col:"orange", dob:"01/08/1980"},
    {id:5, name:"Margret Marmajuke", progress:16, gender:"female", rating:5, col:"yellow", dob:"31/01/1999"},
    {id:6, name:"Frank Harbours", progress:38, gender:"male", rating:4, col:"red", dob:"12/05/1966", car:1},
    {id:1, name:"Oli Bob", progress:12, gender:"male", rating:1, col:"red", dob:"19/02/1984", car:1},
    {id:2, name:"Mary May", progress:1, gender:"female", rating:2, col:"blue", dob:"14/05/1982", car:true},
    {id:3, name:"Christine Lobowski", progress:42, gender:"female", rating:0, col:"green", dob:"22/05/1982", car:"true"},
    {id:4, name:"Brendon Philips", progress:100, gender:"male", rating:1, col:"orange", dob:"01/08/1980"},
    {id:5, name:"Margret Marmajuke", progress:16, gender:"female", rating:5, col:"yellow", dob:"31/01/1999"},
    {id:6, name:"Frank Harbours", progress:38, gender:"male", rating:4, col:"red", dob:"12/05/1966", car:1},
    {id:1, name:"Oli Bob", progress:12, gender:"male", rating:1, col:"red", dob:"19/02/1984", car:1},
    {id:2, name:"Mary May", progress:1, gender:"female", rating:2, col:"blue", dob:"14/05/1982", car:true},
    {id:3, name:"Christine Lobowski", progress:42, gender:"female", rating:0, col:"green", dob:"22/05/1982", car:"true"},
];

//initialize table
var table = new Tabulator("#tblData1", {
    data:tabledata, //assign data to table
    autoColumns:false, //create columns from data field names
    printAsHtml:true,
    columns:[                 //define the table columns
        {title:"Name", field:"name", editor:"input", width:"15%"},
        <!-- {title:"Task Progress", field:"progress", hozAlign:"left", formatter:"progress", editor:true}, -->
        {title:"Gender", field:"gender", width:95, editor:"select", editorParams:{values:["male", "female"]}, width:"15%"},
        <!-- {title:"Rating", field:"rating", formatter:"star", hozAlign:"center", width:100, editor:true}, -->
        {title:"Color", field:"col",headerFilter:true, width:130, editor:"input", width:"15%"},
        {title:"Date Of Birth", field:"dob", width:130, sorter:"date", hozAlign:"center", width:"15%"},
        {title:"Driver", field:"car", width:90,  hozAlign:"center", formatter:"tickCross", sorter:"boolean", editor:true, width:"16%"},
        {title:"Test",width:"24%",
        columns:[
        {title:"Test1",width:"12%"},
        {title:"Test2",width:"12%"},
        ]},
    ],
});

var table = new Tabulator("#tblData2", {
    data:tabledata, //assign data to table
    autoColumns:false, //create columns from data field names
    printAsHtml:true,
    columns:[                 //define the table columns
        {title:"Name", field:"name", editor:"input", width:"15%"},
        <!-- {title:"Task Progress", field:"progress", hozAlign:"left", formatter:"progress", editor:true}, -->
        {title:"Gender", field:"gender", width:95, editor:"select", editorParams:{values:["male", "female"]}, width:"15%"},
        <!-- {title:"Rating", field:"rating", formatter:"star", hozAlign:"center", width:100, editor:true}, -->
        {title:"Color", field:"col",headerFilter:true, width:130, editor:"input", width:"15%"},
        {title:"Date Of Birth", field:"dob", width:130, sorter:"date", hozAlign:"center", width:"15%"},
        {title:"Driver", field:"car", width:90,  hozAlign:"center", formatter:"tickCross", sorter:"boolean", editor:true, width:"16%"},
        {title:"Test",width:"24%",
        columns:[
        {title:"Test1",width:"12%"},
        {title:"Test2",width:"12%"},
        ]},
    ],
});

<html>
<head>
<script src="js/tabulator.min.js"></script>
<link href="css/tabulator.min.css" rel="stylesheet"/>
</head>
<body>
<div id="tblData1" style="width:550px;"></div>
<br><br><br><br>
<div id="tblData2" style="width:550px;"></div>
<script type="text/javascript">
</script>
</body>
</html>

类似示例：https://datatables.net/extensions/fixedheader/examples/options/columnFiltering.html

Answer 1

如果您想这样做，则必须在表格上指定最大高度，否则它不知道何时显示滚动条。

如果没有 height 或 maxHeight 设置，表格将假定您想要显示表格中的所有数据，此时表格将占据其最大高度，因此任何滚动都将发生在其父元素或页面正文，此时页眉将随表格滚动。

height 或 maHeight 可以设置为任何有效的 CSS 高度值。

var table = new Tabulator("#example-table", {
    maxHeight:"100%", //do not let table get bigger than the height of its parent element
});

更多信息请访问Layout Documentation