基于Bootstraptable组件实现多层表头的实例代码_bootstraptable多层表头,bootstraptable多级表头 - CSDN文库

151 浏览量更新于2023-05-11 评论收藏 71KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

基于基于Bootstrap table组件实现多层表头的实例代码组件实现多层表头的实例代码

Bootstrap table还有一个很多强大的功能，下面就通过本文给大家分享基于Bootstrap table组件实现多层表头的

实例代码，需要的朋友参考下吧

在做私活的时候，有一个需求是要在页面上实现多层表头。一开始有点懵，不知道怎么来实现，我回想起在JFTT的时候，曾

用过Flex版的多层表头，不过那离现在已经很久远了，久远到Flex已经被淘汰出局了。于是在网上折腾了好一会儿，终于找到

一款用起来简单，效果又很不错的组件——Bootstrap-table。

Bootstrap-table还有很多强大的功能，但这篇文章我们把关注点只放在多层表头上，关注点确定后，这篇博客就很简单了，但

我觉得还是很有必要推而广之——因为之前在看董卿主持的《诗词大会》，里面有很多基础的知识，竟然有很多人都答不上

来，搞得我一度很“嚣张”，对老婆夸下海口说我也能过第一轮，但事实是我过不了——我也不会写“碧玉妆成一树高，万条垂下

绿丝绦（tao）”中的tao字。

所以，文章不在于其难度，而在于其意义——在月球上迈上一小步和在地球上迈上一小步差别就在于“这是个人迈出的一小

步，但却是人类迈出的一大步。”

0.效果图效果图

1.实现方法实现方法

<html>

<head>

<title>多层表头</title>

<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">

<style type="text/css">

.table td, .table th {

font-style: normal;

font-weight: normal;

text-align:center;

}

.bootstrap-table {

width: 100%;

}

</style>

</head>

<body>

<table data-toggle="table">

<thead>

<tr>

<th data-colspan="1">妻子</th>

<th data-colspan="2">车子</th>

<th data-colspan="3">房子</th>

<th data-rowspan="2">总价值</th>

</tr>

<tr>

<th>唯一</th>

<th>Mini</th>

<th>Smart</th>

<th>90平</th>

<th>149平</th>

<th>别墅</th>

</tr>

</thead>

<tbody>

<tr>

<td>∞</td>

<td>30万</td>

<td>20万</td>

<td>60万</td>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论0

weixin_38652870

粉丝: 5
资源: 904

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈