Bootstrap實現(xiàn)的表格合并單元格示例
更新時間：2018年02月06日 11:20:11 作者：翱翔天地
這篇文章主要介紹了Bootstrap實現(xiàn)的表格合并單元格,涉及bootstrap界面布局相關操作技巧,需要的朋友可以參考下
本文實例講述了Bootstrap實現(xiàn)的表格合并單元格。分享給大家供大家參考，具體如下：
1、問題背景
利用Bootstrap設計表格，并且表格需要合并單元格
2、實現(xiàn)源碼
<!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" 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、實現(xiàn)結果
PS：關于bootstrap布局，這里再為大家推薦一款本站的在線可視化布局工具供大家參考使用：
在線bootstrap可視化布局編輯工具：
http://tools.jb51.net/aideddesign/layoutit
希望本文所述對大家基于bootstrap的程序設計有所幫助。
相關文章
JavaScript創(chuàng)建對象的七種方式(推薦)
JavaScript創(chuàng)建對象的方式有很多，通過Object構造函數(shù)或對象字面量的方式也可以創(chuàng)建單個對象，顯然這兩種方式會產(chǎn)生大量的重復代碼，并不適合量產(chǎn)。接下來介紹七種非常經(jīng)典的創(chuàng)建對象的方式，他們也各有優(yōu)缺點2017-06-06
javascript是種腳本語言，瀏覽器下載到哪兒就會執(zhí)行到哪兒，下面為大家介紹下，如何給應用部分的js代碼一個統(tǒng)一的入口2014-06-06
JavaScript實現(xiàn)數(shù)組去重的7種方法
去重是開發(fā)中經(jīng)常會碰到的一個熱點問題，本文詳細的介紹了JavaScript實現(xiàn)數(shù)組去重的7種方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-03-03
淺談js函數(shù)中的實例對象、類對象、局部變量(局部函數(shù))
下面小編就為大家?guī)硪黄獪\談js函數(shù)中的實例對象、類對象、局部變量(局部函數(shù))。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
JavaScript使用readAsDataURL讀取圖像文件
這篇文章主要為大家詳細介紹了JavaScript使用readAsDataURL讀取圖像文件的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
下拉列表框默認情況下是不可編輯的，下面為大家介紹個不錯的方法可以使下拉列表框可編輯，具體實現(xiàn)如下，需要的朋友可以參考下2013-12-12
JavaScript實現(xiàn)模態(tài)對話框實例
這篇文章主要介紹了JavaScript實現(xiàn)模態(tài)對話框實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-01-01
與許多其他編程語言一樣,JavaScript?也在不斷發(fā)展,小編今天就為大家介紹ES13中添加的最新功能,并查看其用法示例以更好地理解它們,有需要的小伙伴可以了解下2023-09-09
jquery獲取URL中參數(shù)解決中文亂碼問題的兩種方法
從A頁面通過url傳參到B頁面時，獲取URL中參數(shù)出現(xiàn)中文亂碼問題，解析url參數(shù)的正確方法如下，感興趣的朋友可以參考下2013-12-12
這篇文章主要介紹了js實現(xiàn)多圖左右切換功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08