列合并和列宽度固定:

 1  .setWidth {
 2         table-layout: fixed;
 3     }
 4
 5         .setWidth > thead > tr > th {
 6             width: 80px;
 7         }
 8 <table class="setWidth" id="EstateTable" data-mobile-responsive="true">
 9                                     <colgroup>
10                                         <col style="width:36px;" />
11                                         <col style="width:17%" />
12                                         <col style="width:48px;" />
13                                         <col style="width:60px;" />
14                                         <col style="width:12%;" />
15                                         @*<col style="width:7%;" />
16                                             <col style="width:7%;" />*@
17                                         <col style="width:6%;" />
18                                         <col style="width:144px;" />
19                                         <col style="width:48px;" />
20                                         <col style="width:48px;" />
21                                         <col style="width:6%;" />
22                                         <col style="" />
23                                     </colgroup>
24                                     <thead>
25
26                                         <tr>
27                                             <th data-field="state" style="width:36px;" data-checkbox="true"></th>
28                                             <th data-field="EstateType" data-visible="false">盘源类型ID</th>
29                                             <th data-field="ID" data-visible="false">ID</th>
30                                             <th data-field="EstateName" data-formatter="nameFormatter">楼盘名称</th>
31                                             <th data-field="EstateTypeDisplay">类型</th>
32                                             <th data-field="Address" style="width:60px;" align="center">城区</th>
33                                             <th data-field="Developer">发展商</th>
34
35                                             @*<th data-field="EstateModeDisplay">楼宇类型</th>*@
36                                             @*<th data-field="Area">占地面积</th>
37                                                 <th data-field="ConstrctionArea">建筑面积</th>*@
38                                             @*<th data-field="ProjectProxyModeDisplay">代理类型</th>*@
39                                             <th data-field="RegisterName">跟进人</th>
40                                             <th data-field="RegisteDate">登记时间</th>
41                                             <th data-field="FollowLevelDisplay">评级</th>
42                                             <th data-field="BusinessCard" data-formatter="imgFormatter">名片</th>
43                                             <th data-field="AuthStatusDisplay" data-formatter="actionFormatter">状态</th>
44                                             <th data-field="operation" width="120px;" data-formatter="operateFormatter">操作</th>
45
46                                         </tr>
47                                     </thead>
48                                 </table>

行合并:

$('#EstateTable').bootstrapTable({url: '/table/tableStyle',method:'post',pagination: true, //分页pageNumber:1,                       //初始化加载第一页,默认第一页pageSize: 10,                       //每页的记录行数(*)pageList: [10, 25, 50, 100],        //可供选择的每页的行数(*)search: false, //显示搜索框sidePagination: "server"        onLoadSuccess: function (data) {        $('#EstTable').bootstrapTable('mergeCells', {index: 1, field: 'name', rowspan: 3});
        }
    });

转载于:https://www.cnblogs.com/toloe/p/7927997.html

bootstrap-table 行合并和列合并,以及固定列宽度等问题相关推荐

  1. bootstrap table 行内文本样式绑定利用cellstyle属性

    新手小白的我在前几天利用bootstrap table写表格样式的时候,有个需求当表格内容为"正常"时,要显示绿色文本,当"离线"时文本颜色显示为红色,具体想达 ...

  2. iview table 自定义列_案例 | iview中Table:拖拽适配列、自定义固定列、合并行

    文 / 景朝霞 来源公号 / 朝霞的光影笔记 ID / zhaoxiajingjing ❥❥❥❥点个赞,让我知道你来过~❥❥❥❥ 0 / 更新Table "iview": &quo ...

  3. layui table设置表格单元格换行,固定列高度改变

    layui table设置表格单元格换行 css /** 控制表格单元格换行 **/ .layui-table-cell {height: auto;word-break: normal;displa ...

  4. Bootstrap table 行编辑导航

    /*开启表格编辑方向键导航 方向键(←): VK_LEFT (37) 方向键(↑): VK_UP (38) 方向键(→): VK_RIGHT (39) 方向键(↓): VK_DOWN (40) */ ...

  5. bootstrap table固定列导致复选框失效的解决方法

    //获取选中多行数据 function getSelectedRow_st() {//解決固定列导致选择复选框选不中的问题//首先判断表格是否为固定列表格,使用bootstrapTable('getO ...

  6. Bootstrap Table插件 页面跳转后再回来保存搜索的值

    2019独角兽企业重金招聘Python工程师标准>>> 场景:在一个内容比较多的列表页面中,使用bootstrap table的搜索功能后,选择某列,点击此列中一个按钮,跳转到详情页 ...

  7. layui table行点击tr_layui的table单击行勾选checkbox功能方法

    如下所示: //单击行勾选checkbox事件 $(document).on("click",".layui-table-body table.layui-table t ...

  8. 关于js表格固定列实现

    一.概述 在开发过程中前端列表展示数据对比查看的情况是比较常见的,我最近接到的一个任务就是要处理这样的数据:一般这种需求将某一列或几列进行横向固定然后其它不固定的列可以照常实现x轴的滚动: 话不多说先 ...

  9. bootstrap table 合并行_ElementUI Table组件如何使用合并行或列功能深入解析

    需求,对指定的列表展示进行合并单元格,循环展示指定行和指定列. 1.官方文档 通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row.当前列col ...

  10. html table 表格 行合并 列合并

    目录 1.表格边框合并 2.行合并 3.列合并 表格:table 行:tr 列:td 属性: border:边框 width:宽 height:高 bordercolor:变宽颜色 cellspaci ...

最新文章

  1. Solr索引数据同步ReplicationHandler
  2. flink启动命令参数_Flink调优之前,必须先看懂的TaskManager内存模型
  3. python将索引升序_程序在Python中按升序删除元素后获取列表的索引
  4. 转载:Yahoo推出视频标签游戏
  5. oracle主从表分离怎么实时更新数据_高可用数据库主从复制延时的解决方案
  6. Android开发之设置Dialog外部页透明的方法亲测可用
  7. shiro学习(10):servelet实现权限认证一
  8. 1-1 顺序表操作集 (20 分)
  9. webpack使用文档
  10. STL-vector容器
  11. 附加:下半部分sql语句 区/县(数据表)
  12. PID调控公式和相关方法
  13. Linux与.Net Core(一) Centos 系统制作教程
  14. 一文读懂AB测试原理及样本量计算的Python实现
  15. 前后端分离的优势是什么?
  16. GIS软件——arcgis10.2制作符号并链接符号库
  17. Chrome浏览器快捷键大全
  18. 016.从中序与后序遍历序列构造二叉树
  19. 重新注册系统所有dll文件
  20. 史上最强的美名腾智能起名成功发布

热门文章

  1. html两个div间有白线,html-在特定浏览器宽度下,白线出现在渐变填充div的末尾
  2. 龙芯下中标系统C语言查找设备号_龙芯:主控进驻国产激光打印机并适配麒麟OS...
  3. python自由落体_VPython - example - 模拟自由落体运动
  4. 【Pytorch神经网络实战案例】28 GitSet模型进行步态与身份识别(CASIA-B数据集)
  5. 三、bootstrap4 组件(警告和提示框、徽章和面包屑、按钮按钮组、卡片、列表组、导航和选项卡、分页和进度条、巨幕和旋转图标、轮播图、折叠菜单、下拉菜单、导航条、滚动监听、轻量弹框、模态框、表单)
  6. LeetCode 294. 翻转游戏 II(记忆化递归)
  7. LeetCode 1295. 统计位数为偶数的数字
  8. LeetCode 885. 螺旋矩阵 III
  9. LeetCode 1054. 距离相等的条形码(优先队列)
  10. LeetCode 678. 有效的括号字符串(栈)