如何避免自动制表符 header 换行

Question

我遇到一个奇怪的情况...

当容器宽度小于 100% 时，列总是这样换行： set layout as fitColumns, without width specified代码是：

const tbTB=new Tabulator('#stbTB',{
    layout: "fitColumns",
    columns:[
        {title:'SPLT',field: 'SPLT', editor:'input',validator:'numeric',headerSort:false},
        {title:'RRH',field: 'RRH', editor:'input',validator:'numeric',headerSort:false},
        {title:'Yaw',field: 'Yaw', editor:'input',validator:'numeric',headerSort:false},
        {title:'Roll',field: 'Roll',editor:'input',validator:'numeric',headerSort:false}
    ]
})

如果我将布局设置为 fitData，行将自动水平填充： set layout as fitData, row will fill horizontally。代码是：

const tbTB=new Tabulator('#stbTB',{
    layout: "fitData",
    columns:[
        {title:'SPLT',field: 'SPLT', editor:'input',validator:'numeric',headerSort:false},
        {title:'RRH',field: 'RRH', editor:'input',validator:'numeric',headerSort:false},
        {title:'Yaw',field: 'Yaw', editor:'input',validator:'numeric',headerSort:false},
        {title:'Roll',field: 'Roll',editor:'input',validator:'numeric',headerSort:false}
    ]
})

我不知道为什么会这样。我将简单版本复制到 pencode，无法重现此错误。这是一个大项目，我不能在这里粘贴所有代码。如果需要，我附上容器的 css 作为参考。 css for the container。创建容器的代码：

divSub.append('div')
    .attr('id','stbTB')
    .style('width','49%')
    .style('height','100%');

顺便说一句，我在这个页面中有几个具有相同设置的表格。如果容器宽度为 100%，则看起来不错，没有任何意外的换行。有没有人遇到类似的情况？我该如何解决？

非常感谢！

Answer 1

这表明您的网站上有一些通用 CSS 干扰了 Tabulator 元素的布局方式。

检查您是否没有任何以 div 或 * 为目标的 CSS 选择器，因为这些选择器也可能以意想不到的方式与 Tabulator 元素交互

如何避免自动制表符 header 换行

how to avoid automatic Tabulator header wrap

javascript

tabulator