Bootstrap table使用心得---thead与td无法对齐的问题

简介: Bootstrap table使用心得---thead与td无法对齐的问题

当使用工具条中的显示/隐藏列的时候, 经常出现表格的列头与内容无法对齐的问题。


网上搜到两种处理方法,如下:


1. 去掉option中的height,完美对齐,但当数据较多的时候,table会自动增加height,显示所有数据而不显示滚动条。


2. 注释掉如下两行

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



完美对齐,但会导致无法冻结表头。


这两种结果都是鱼与熊掌不可兼得, 被影响的功能也是非常想要的,让小罗我很郁闷。


最后怀疑问题的原因应该是列的减少过程中,剩余列设置了宽度,但减少列后要填充剩余宽度时的计算问题。


最后自己采用了如下方式,供大家参考:  


不设置其中一列的宽度,使其自动填充,如下代码

<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"


正常业务中也经常会有这样要求自动填充宽度的列,算是比较好的一种解决方式。



目录
相关文章
|
5月前
|
JSON 前端开发 数据格式
bootstrap table表格的点击详情按钮操作
bootstrap table表格的点击详情按钮操作
50 1
|
5月前
|
前端开发
表格插件-bootstrap table的隔行换色
表格插件-bootstrap table的隔行换色
59 0
|
5月前
|
前端开发 JavaScript
表格插件-bootstrap table的表内查看编辑删除
表格插件-bootstrap table的表内查看编辑删除
44 0
|
5月前
|
前端开发 JavaScript
Bootstrap Table根据参数搜索功能
Bootstrap Table根据参数搜索功能
50 0
|
5月前
|
前端开发
bootstrap table点击修改按钮给弹框赋值
bootstrap table点击修改按钮给弹框赋值
30 0
|
5月前
|
JSON 前端开发 数据库
Bootstrap Table使用教程(请求json数据渲染表格)
Bootstrap Table使用教程(请求json数据渲染表格)
75 0
|
5月前
|
前端开发
bootstrap table分页悬停颜色改变
bootstrap table分页悬停颜色改变
21 0
|
5月前
|
前端开发
解决bootstrap table刷新加载时白色闪屏问题
解决bootstrap table刷新加载时白色闪屏问题
36 0
|
5月前
|
前端开发
bootstrap table+layer实现一个表格删除
bootstrap table+layer实现一个表格删除
21 0
|
5月前
|
前端开发
bootstrap table表格去掉排序箭头
bootstrap table表格去掉排序箭头
48 2