不使用height参数的制表符粘贴标头

Question

我想在Tabulator中使用粘性标题，并且在创建表时不想使用height变量。任何想法将不胜感激。

var table = new Tabulator("#example-table", {
        height:"100px", // Sticky header works
        // height:false,// Use instead of height:"100px", sticky header fails
        // leaving the height argument out, sticky header fails
        columns:[
            {title:"Name", field:"name"},
            {title:"Progress", field:"progress", align:"right", sorter:"number"},
            {title:"Gender", field:"gender"},
            {title:"Rating", field:"rating", align:"center"},
            {title:"Date Of Birth", field:"dob", align:"center", sorter:"date"}
        ],
        data: [
            {id:1, name:"Oli Bob", progress:12, gender:"male", rating:1,  dob:"14/04/1984", car:1},
            {id:2, name:"Mary May", progress:1, gender:"female", rating:2,  dob:"14/05/1982", car:true},
            {id:3, name:"Christine Lobowski", progress:42, gender:"female", rating:0,  dob:"22/05/1982", car:"true"},
            {id:4, name:"Brendon Philips", progress:100, gender:"male", rating:1,  dob:"01/08/1980"},
            {id:5, name:"Margret Marmajuke", progress:16, gender:"female", rating:5,  dob:"31/01/1999"},
            {id:6, name:"Frank Harbours", progress:38, gender:"male", rating:4, dob:"12/05/1966", car:1},
            {id:7, name:"Jamie Newhart", progress:23, gender:"male", rating:3, dob:"14/05/1985", car:true}
        ]
});

请查看/运行此jsfiddle。

Answer 1

如果升级到版本4.6并在表格中添加最大高度100％，则表格将超过其包含元素的高度后便会滚动。

表必须具有滚动条才能使标题保持固定，否则它只将表视为页面上的静态元素，并且不会出现溢出

Answer 2

通过@Oli Folkerd解决（当然）。使用/更新表格4.6，并将maxHeight参数设置为100％。然后，该表将在容器元素内滚动并带有粘性标题。完美，谢谢你@Oli Folkerd

查看解决方案，然后在这里尝试jsfiddle

<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
<div class="example-table" id="example-table"/> 

div.example-table {
   height: 150px;
   border: 1px solid black;
}

var table = new Tabulator("#example-table", {
    // height:"100px",  // Sticky header works
    // height:false,        // Use instead of height:"311px", sticky header fails
    // leaving the height argument out, sticky header fails
    maxHeight:"100%", // use this and version 4.6 of Tabulator
    columns:[
        {title:"Name", field:"name"},
        {title:"Progress", field:"progress", align:"right", sorter:"number"},
        {title:"Gender", field:"gender"},
        {title:"Rating", field:"rating", align:"center"},
        {title:"Date Of Birth", field:"dob", align:"center", sorter:"date"}
    ],
    data: [
        {id:1, name:"Oli Bob", progress:12, gender:"male", rating:1, dob:"14/04/1984", car:1},
        {id:2, name:"Mary May", progress:1, gender:"female", rating:2,  dob:"14/05/1982", car:true},
        {id:3, name:"Christine Lobowski", progress:42, gender:"female", rating:0,  dob:"22/05/1982", car:"true"},
        {id:4, name:"Brendon Philips", progress:100, gender:"male", rating:1,  dob:"01/08/1980"},
        {id:5, name:"Margret Marmajuke", progress:16, gender:"female", rating:5,  dob:"31/01/1999"},
        {id:6, name:"Frank Harbours", progress:38, gender:"male", rating:4, dob:"12/05/1966", car:1},
        {id:7, name:"Jamie Newhart", progress:23, gender:"male", rating:3, dob:"14/05/1985", car:true}
]
});