zoukankan      html  css  js  c++  java
  • 毕设问题(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>
    

      效果图:

    欢迎转载,但请声明出处。
  • 相关阅读:
    CNN的学习记录
    softmax和softmax loss的学习记录
    Vue2.0 生命周期
    Vue methods 方法
    Vue2.0 全局操作 Vue.set
    Vue2.0 自定义指令 vuedirective
    Vue2.0 构造器的延伸 Vue.extend
    vue computed
    vuecli 脚手架分析
    h5表单介绍与案例
  • 原文地址:https://www.cnblogs.com/tianjiqx/p/5398511.html
Copyright © 2011-2022 走看看