Bootstrap实现的表格合并单元格示例
本文实例讲述了Bootstrap实现的表格合并单元格。分享给大家供大家参考，具体如下：
1、问题背景
利用Bootstrap设计表格，并且表格需要合并单元格
2、实现源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Bootstrap-表格合并单元格</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="external nofollow" />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.js" ></script>
<style>
body,html{
width: 99%;
height: 98%;
font-family: "微软雅黑";
font-size: 14px;
}
table{
width: 100%;
}
</style>
<script>
</script>
</head>
<body>
<div class="row">
<div class="col-xs-12">
<table class="table table-striped">
<tr>
<td>
<label for="stuNo">学号：</label>
<input type="text" id="stuNo" />
<div class="btn-group" style="width: 157px; height: 26px;">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="width: 157px; height: 26px;">
班级
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >一班</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二班</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >三班</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >四班</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >五班</a></li>
</ul>
</div>
<button type="button" class="btn btn-primary">查询</button>
<button type="button" class="btn">重置</button>
</td>
</tr>
</table>
</div>
<div class="col-xs-12">
<div class="col-xs-2">
<table class="table table-striped table-bordered">
<caption>学生表</caption>
<thead>
<tr>
<th>学生</th>
<th>学号</th>
</tr>
</thead>
<tbody>
<tr>
<td>胡思</td>
<td>2016010101</td>
</tr>
<tr>
<td>赵四</td>
<td>2016010102</td>
</tr>
<tr>
<td>陈诚</td>
<td>2016010103</td>
</tr>
<tr>
<td>李磊</td>
<td>2016010104</td>
</tr>
<tr>
<td>孙杨</td>
<td>2016010105</td>
</tr>
<tr>
<td>李爽</td>
<td>2016010106</td>
</tr>
</tbody>
</table>
<table class="table table-striped table-bordered">
<caption>学生表</caption>
<thead>
<tr>
<th>学生</th>
<th>学号</th>
</tr>
</thead>
<tbody>
<tr>
<td>胡思</td>
<td>2016010101</td>
</tr>
<tr>
<td>赵四</td>
<td>2016010102</td>
</tr>
<tr>
<td>陈诚</td>
<td>2016010103</td>
</tr>
<tr>
<td>李磊</td>
<td>2016010104</td>
</tr>
<tr>
<td>游豪</td>
<td>2016010105</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-10">
<table class="table table-striped">
<tr style="text-align: center;">
<td>到校</td>
<td>回家</td>
<td>距离</td>
</tr>
<tr style="text-align: center;">
<td colspan="2" style="text-align: center;">222</td>
<td rowspan="2" style="width: 200px;">
<div class="col-xs-12">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>姓名</th>
<th>学号</th>
</tr>
</thead>
<tbody>
<tr>
<td>胡思</td>
<td>2016010101</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">333</td>
</tr>
</table>
<table class="table table-striped">
<tr style="text-align: center;">
<td>到校</td>
<td>回家</td>
<td>距离</td>
</tr>
<tr style="text-align: center;">
<td colspan="2" style="text-align: center;">222</td>
<td rowspan="2" style="width: 200px;">
<div class="col-xs-12">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>姓名</th>
<th>学号</th>
</tr>
</thead>
<tbody>
<tr>
<td>胡思</td>
<td>2016010101</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">333</td>
</tr>
</table>
<table class="table table-striped">
<tr style="text-align: center;">
<td>到校</td>
<td>回家</td>
<td>距离</td>
</tr>
<tr style="text-align: center;">
<td colspan="2" style="text-align: center;">222</td>
<td rowspan="2" style="width: 200px;">
<div class="col-xs-12">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>姓名</th>
<th>学号</th>
</tr>
</thead>
<tbody>
<tr>
<td>胡思</td>
<td>2016010101</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">333</td>
</tr>
</table>
<table class="table table-striped">
<tr style="text-align: center;">
<td>到校</td>
<td>回家</td>
<td>距离</td>
</tr>
<tr style="text-align: center;">
<td colspan="2" style="text-align: center;">222</td>
<td rowspan="2" style="width: 200px;">
<div class="col-xs-12">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>姓名</th>
<th>学号</th>
</tr>
</thead>
<tbody>
<tr>
<td>胡思</td>
<td>2016010101</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">333</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
3、实现结果
PS：关于bootstrap布局，这里再为大家推荐一款本站的在线可视化布局工具供大家参考使用：
在线bootstrap可视化布局编辑工具：
http://tools.jb51.net/aideddesign/layoutit
希望本文所述对大家基于bootstrap的程序设计有所帮助。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#nhooo.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。
基础教程
- HTML基础教程
- HTML5基础教程
- HTML参考手册
- SVG 教程
- CSS 教程
- CSS 参考手册
- CSS3教程
- Bootstrap3 教程
- Bootstrap4 教程
- Font Awesome图标
- JavaScript 教程
- JavaScript 参考手册
- jQuery 教程
- AJAX 教程
- JSON 教程
- AngularJS 教程
- ReactJS 教程
- NodeJS 教程
- Python 教程
- C++ 教程
- Golang 教程
- C 语言教程
- PHP 教程
- C# 教程
- LINQ 教程
- Lua 教程
- Ruby 教程
- Rust 教程
- Linux 教程
- R 语言教程
- Docker 教程
- Scala 教程
- MatLab 教程
- Erlang 教程
- Pandas教程
- Numpy教程
- Matplotlib教程
- Flask教程
- Java 教程
- SpringBoot 教程
- JDBC 教程
- JSP 教程
- Servlet 教程
- Maven 教程
- Spring 教程
- Django 教程
- Swift 教程
- Kotlin 教程
- SQL 教程
- MongoDB 教程
- SQLite 教程
- PostgreSQL 教程
- MySql 教程
- Redis 教程
- Elasticsearch 教程
猜你喜欢
- tensorflow TFRecords文件的生成和读取的方法
- TensorFlow实现创建分类器
- Python模拟随机游走图形效果示例
- 最好用的Android省市区三级联动选择效果
- window环境配置Mysql 5.7.21 windowx64.zip免安装版教程详解
- Java编程多线程之共享数据代码详解
- Python 12306抢火车票脚本 Python京东抢手机脚本
- TensorFlow高效读取数据的方法示例
- JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
- 浅析PHP类的反射来实现依赖注入过程
- MySql5.7.21安装要点记录笔记
- Centos7 利用LVM实现动态扩容的方法
- mysql 5.7.21解压版本安装 Navicat数据库操作工具安装
- 20行JS代码实现粘贴板复制功能
- JS中offset和匀速动画详解
- Bootstrap实现的表格合并单元格示例
- django使用xlwt导出excel文件实例代码
- windows 10下mysql 5.7.21 winx64安装配置方法图文教程
- 统计Linux 中文件和文件夹/目录的数量(示例代码)
- win10下mysql5.7.21解压版安装教程
- 详解ios中scrollView上使用masonry
- JavaScript实现获取select下拉框中第一个值的方法
- Python使用装饰器进行django开发实例代码
- SpringBoot整合Redis、ApachSolr和SpringSession的示例
- Python yield与实现方法代码分析