行列数量、名称已经确定

入门版本

<!--数据展现部分-->
<table id="table">
</table>
<script>
$("#table").bootstrapTable({columns: [[{'title': '', 'colspan':2},{'title': '综合', 'colspan':2}],[{title: 'col1', colspan: 1},{title: 'col2', colspan: 1},{title: 'col3', colspan: 1},{title: 'col4', colspan: 1}]]
})
</script>

效果图：

注意：
boostraptable添加行列的时候默认是从左到右从上到下且不会自动换行
不同中括号中的内容分布在相邻两行。

正常版本

<table id="table"></table><script>
$("#table").bootstrapTable({columns: [[{title: '', colspan:2},{title: '综合', colspan:2}],[{title: 'col1', colspan: 1, rowspan: 2},{title: 'col2', colspan: 1, rowspan: 1},{title: 'col3', colspan: 1, rowspan: 1},{title: 'col4', colspan: 1, rowspan: 1}],[{title: 'col5'},{title: 'col6'},{title: 'col7'}]]
})
</script>

效果图：

中高级版本

这个版本是https://www.cnblogs.com/hwaggLee/p/7843100.html上学习到的

<table id="table">
</table>
<!--
注意：halign/align/valign都是调整每一个单元格中title的位置，可以用left/right/top/botton等替换center测试一下效果
-->
<script>
$("#table").bootstrapTable({columns:[[{"title": "洗衣机统计表","halign":"center","align":"center","colspan": 5}],[{field: 'name',title: "功能分组",valign:"middle",align:"center",colspan: 1,rowspan: 2},{title: "美的",valign:"middle",align:"center",colspan: 2,rowspan: 1},{title: "松下",valign:"middle",align:"center",colspan: 2,rowspan: 1}],[{field: 'mideaNum',title: '数量',valign:"middle",align:"center"},{field: 'mideaPercent',title: '占比',valign:"middle",align:"center"},{field: 'panasonicNum',title: '数量',valign:"middle",align:"center"},{field: 'panasonicPercent',title: '占比',valign:"middle",align:"center"}]]})
</script>

效果图：

大家测试效果的时候可以用一下bootstrapTable官网的在线测试https://live.bootstrap-table.com/
点击上方的run就能出结果了。港真，这个挺好用的

bootstrapTable通过rowspan/colspan合并单元格相关推荐

bootstraptable合并标题_bootstrapTable 合并单元格
/** * 合并单元格 * @param data 原始数据(在服务端完成排序) * @param fieldName 合并属性名称 * @param colspan 合并列 * @param tar ...
HTML创建表格及合并单元格
创建表格 -------------------------------------写在前面-------------------------------------------- 在HTML中的表格 ...
HTML5+CSS3网页设计从基础到入门——合并单元格
一,合并单元格的方式跨行合并:rowspan＝"合并单元格的个数" 跨列合并:colspan＝"合并单元格的个数" ...
WEB前端学习-合并单元格
一.合并单元格有两种方式跨行合并:rowspan="合并单元格的个数" 跨列合并:colspan="合并单元格的个数" 二.合并单元格顺序和学习汉字的书写顺 ...
表格标签，今日小说排行榜案例，合并单元格，无序列表，有序列表，自定义列表，表单标签，注册页面综合案例
表格标签表格主要用于展示数据 <table><tr><td>单元格内的文字</td>...</tr>... </table> ...
表格标签(合并单元格，列表结构标签thead， tbody，有序列表ol，无序列表dl )
表格用法: < table >< /table >是用于表格的标签. < tr >< /tr>标签用于定义表格中的行,必须嵌套在< table & ...
HTML合并单元格、折叠边框
合并单元格跨行合并:rowspan 跨列合并:colspan 合并单元格的基本方式: 将多个内容合并的时候,就会有多余的东西,把它删除. 例如把 3个 td 合并成一个, 那就多余了2个,需要删除 ...
HTML常用标签之表格标签(合并单元格)
表格标签之合并单元格前言一.合并单元格的方式二.目标单元格三.删除单元格四 .代码实现总结前言关于表格标签基础点这里→HTML常用标签之表格标签在某些特殊情况下我们需要把多个单元格合 ...
HTML - 合并单元格
文章目录一.合并单元格的方式二.使用方法一.合并单元格的方式跨行合并 : rowspan="合并单元格的个数" 跨列合并 : colspan="合并单元格的个数& ...

bootstrapTable通过rowspan/colspan合并单元格

行列数量、名称已经确定

bootstrapTable通过rowspan/colspan合并单元格相关推荐

最新文章

热门文章