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