毕设问题(1)表格table的表头自定义、复合表头,组合表格
毕业设计,是一个web项目,遇到的些问题,记录下来。也许也有同样只知道一些,不是那么系统的学过的人,会遇到同样的问题,希望有所帮助。
百度知道有这样一个问题:
bootstrap table 如何实现自定义表头?如图.

通常我们只看到是普通的二维表,但是有时候会有如上图的组合表头情况,这里需要使用th的两个可选属性rowspan和colspan分别是用来修改单元格的竖着和横着占的大小,实现上面的效果需要设置两行tr的thead,1,2,4的<th rowsapn="2"></th>,3的<th colspan="3"></th>.即可.
具体样例:
<table class="table table-striped table-condensed table-hover table-bordered">
<thead>
<tr>
<th rowspan="2">专业ID</th>
<th rowspan="2">主干课程</th>
<th colspan="4">通识教育</th>
<th colspan="4">专业基础</th>
<th colspan="4">专业课</th>
<th colspan="4">独立实践</th>
<th rowspan="2">操作</th>
</tr>
<tr>
<th>学分</th>
<th>学时</th>
<th>必修比例</th>
<th>选修比例</th>
<th>学分</th>
<th>学时</th>
<th>必修比例</th>
<th>选修比例</th>
<th>学分</th>
<th>学时</th>
<th>必修比例</th>
<th>选修比例</th>
<th>学分</th>
<th>学时</th>
<th>必修比例</th>
<th>选修比例</th>
</tr>
</thead>
<tbody>
<tr>.....</<tr>
</tbody>
</table>
效果图:

毕设问题(1)表格table的表头自定义、复合表头,组合表格的更多相关文章
- js 实现table表格拖拽和点击表头升降序排序
js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...
- [转]bootstrap的table插件动态加载表头
原文地址:https://blog.csdn.net/abubu123/article/details/78060321 bootstrap的table属性已经很熟悉了,最近遇到一个问题,犹豫每个列表 ...
- bootstrap table插件动态加载表头
这篇文章主要为大家详细介绍了bootstrap table插件动态加载表头,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 bootstrap的table属性已经很熟悉了,最近遇到一个问题,犹豫 ...
- HTML 表格<table><caption><th><tr><td><thead><tbody><tfoot><col><colgroup>
<table>标签: 定义和用法: <table>标签定义HTML表格. 简单的HTML表格由table元素以及一个或多个tr.th或td元素组成. tr元素定义表格行,th元 ...
- table标签,认识网页上的表格
有时候我们需要在网页上展示一些数据,如某公司想在网页上展示公司的库存清单.如下表: 想在网页上展示上述表格效果可以使用以下代码: 创建表格的四个元素: table.tbody.tr.th.td 1.& ...
- HTML表格,table,thead,tbody,tfoot,th,tr,td,的属性以及跨行,跨列
在HTML中表格是作为一个整体来解析的,解析完才会在页面显示,如果表格很复杂很长,加载时间很长,用户体验就不好.所以这里就要用到表格结构标签,解析一部分就显示一部分,不用等表格全部加载完再显示. 表格 ...
- Web开发——HTML基础(HTML表格 <table>)
参考: 表格属性参考:http://www.w3school.com.cn/tags/tag_table.asp 目录: 1.举例 2.表格 2.1 表格属性 2.2 表格的表头 2.3 表格中的空单 ...
- 表格-table 样式
.table: 表格基本样式 .table-dark:表格显示为黑色 .thead-light: 表头显示颜色跟亮 .thead-dark:表头显示为黑色 .table-striped:表格以条纹形式 ...
- jQuery制作多表格固定表头、切换表头的特效
做了好几天的固定表头特效,总算是搞定了.先说明一下基本功能:我们在一个网页上浏览很多份表格数据的时候,肯定会碰到很多分不清表头,也分不清表 格是哪个的情况,这个时候我们就希望能有一种功能,就是我们再下 ...
随机推荐
- xcode7 添加个人账户 is not on any development teams
XCODE7已经可以免费真机测试, 但添加个人账户后,显示 is not on any development teams , 解决办法: 点击 “-” 删除当前账户,退出XCODE重新打开再添加即可 ...
- jquery常用用法
1.$("prve + next" ) 选择紧接着在perve后的next元素2.$("#div1 > *&quo ...
- Dubbo学习-2-注册中心搭建
1.Dubbo支持如下几种注册中心,推荐使用zookeeper来作为注册中心. 2. 下载zookeeper https://zookeeper.apache.org/releases.html#do ...
- POJ 2502 Subway ( 最短路 && 最短路建图 )
题意 : 给出二维平面上的两个点代表起点以及终点,接下来给出若干条地铁线路,除了在地铁线路上行进的速度为 40km/h 其余的点到点间都只能用过步行且其速度为 10km/h ,现问你从起点到终点的最短 ...
- [CF1182F]Maximum Sine
题意:\(f(x) = \text{abs}(\text{sin}(\frac{p}{q} \pi x))\),给定\(a,b,p,q\),求\(x\in[a,b]\)最大的\(f(x)\). 题解: ...
- 20180826(01)-Java数据结构
Java 数据结构 Java工具包提供了强大的数据结构.在Java中的数据结构主要包括以下几种接口和类: 枚举 (Enumeration) 位集合(BitSet) 向量 (Vector) 栈 (Sta ...
- 20180715-Java String类
public class StringDemo{ public static void main(String args[]){ char[] helloArray = {'h','e','l','l ...
- 「THUPC 2017」机场 / Airport
https://loj.ac/problem/2403 题解 神仙题. 练习赛的时候想了个假建图. 正解太神仙了. 先把不合法情况判掉. 先对时间离散化,每个时间点开一个点. 然后把他们一次串起来,中 ...
- WebGIS常用代码集锦
一.普通代码 1.坐标转换 ol.proj.transform(coordinate, source, destination) ol.proj.transform(coordinate, 'EPSG ...
- http请求方法,get 对比 post
本文转自:http://www.w3school.com.cn/tags/html_ref_httpmethods.asp 两种最常用的 HTTP 方法是:GET 和 POST. 什么是 HTTP? ...