Bootstrap table使用体验—thead与td不能对齐的题材

当使用工具条中的突显/隐藏列的时候,
常常出现表格的列头与内容不能对齐的题目。

网上搜到三种处理格局,如下:

1.
去掉option中的height,完美对齐,但当数码较多的时候,table会自动扩充height,突显全部数据而不显得滚动条。

  1. 表明掉如下两行

    //this.resetHeader();
    //padding += this.$header.outerHeight();

   完美对齐,但会促成不可能冻结表头。

 

那二种结果都以鱼与熊掌不可兼得,
被潜移默化的作用也是12分想要的,让小罗作者很窝囊。

最终嫌疑难点的来头应该是列的削减进度中,剩余列设置了上涨幅度,但减去列后要填充剩余宽度时的乘除难点。

Bootstrap, 

 最后本中国人民银行使了如下方式,供我们参考:  

不设置个中一列的上升幅度,使其机动填充,如下代码

        <thead>
            <tr>
                <th data-field="Code" data-width="105px">编号</th>
                <th data-field="Name" data-switchable="false">姓名</th>
                <th data-field="Sex" data-width="120px">性别</th>
                <th data-field="Age" data-width="120px">年龄</th>
                <th data-field="LoloOperate" data-width="30px">操作</th>
            </tr>
        </thead>

 那样一旦不去掉名称,去掉其余列的时候不会并发对不齐的难点,为了避防万一此列被去掉,加上data-switchable=”false”

 符合规律作业中也平常会有诸如此类须要机关填写宽度的列,算是比较好的一种缓解办法。

相关文章