zoukankan      html  css  js  c++  java
  • 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"

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

  • 相关阅读:
    转:Loadrunner——Block(块)技术
    转:Linux基本命令大全
    转:Loadrunner打开https报错“Internet…
    转:对TCP/IP网络协议的深入浅出归纳
    10.2.1 支持的网络视频类型
    10.2 网络视频
    10.1.2 完整的MediaStore视频示例
    10.1.1 来自MediaStore的视频缩略图
    10.1 使用MediaStore检索视频
    第10章 视频进阶
  • 原文地址:https://www.cnblogs.com/FlyLolo/p/7116467.html
Copyright © 2011-2022 走看看