码迷,mamicode.com
首页 > 其他好文 > 详细

毕设问题(1)表格table的表头自定义、复合表头,组合表格

时间:2016-04-16 16:59:51      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:

毕业设计,是一个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的表头自定义、复合表头,组合表格

标签:

原文地址:http://www.cnblogs.com/tianjiqx/p/5398511.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!