Bootstrap實(shí)現(xiàn)的表格合并單元格示例
更新時(shí)間：2018年02月06日 11:20:11 作者：翱翔天地
這篇文章主要介紹了Bootstrap實(shí)現(xiàn)的表格合并單元格,涉及bootstrap界面布局相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了Bootstrap實(shí)現(xiàn)的表格合并單元格。分享給大家供大家參考，具體如下：
1、問(wèn)題背景
利用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>陳誠(chéng)</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>陳誠(chéng)</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)文章
瀏覽器的后退按鈕使得我們能夠方便地返回以前訪問(wèn)過(guò)的頁(yè)面，它無(wú)疑非常有用。但有時(shí)候我們不得不關(guān)閉這個(gè)功能，以 防止用戶打亂預(yù)定的頁(yè)面訪問(wèn)次序。2008-12-12
利用JavaScript制作一個(gè)搞怪的兔子動(dòng)畫(huà)效果
又是一年新春之際，祝福大家兔年快樂(lè)！給大家介紹一個(gè)有趣的動(dòng)效（兼容?IE），頁(yè)面右下角有一只搞怪的兔子，鼠標(biāo)在頁(yè)面中懸停時(shí)，兔子會(huì)跟著做出不同的動(dòng)作和表情，感興趣的小伙伴可以了解一下2023-01-01
BootStrap響應(yīng)式導(dǎo)航條實(shí)例介紹
響應(yīng)式導(dǎo)航條就是可以在不同的設(shè)備下查看不同的效果。這篇文章主要介紹了BootStrap響應(yīng)式導(dǎo)航條實(shí)例介紹的相關(guān)資料，小編認(rèn)為本文介紹的非常的不錯(cuò)，特此分享給大家，供大家參考2016-05-05
最近在修改重寫(xiě)自己的簡(jiǎn)歷程序，其中要使用皮膚切換和lightbox效果，在開(kāi)發(fā)的工作中IE8，給我?guī)?lái)點(diǎn)麻煩。2009-01-01
本文主要介紹了canvas 實(shí)現(xiàn)中國(guó)象棋的方法。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
微信小程序?qū)崿F(xiàn)打開(kāi)內(nèi)置地圖功能【附源碼下載】
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)打開(kāi)內(nèi)置地圖功能,涉及微信小程序使用wx.openLocation函數(shù)獲取經(jīng)緯度信息的相關(guān)使用技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12
這篇文章主要介紹了一些老手都不一定知道的JavaScript技巧,需要的朋友可以參考下2014-05-05
ToolTip 通過(guò)Js實(shí)現(xiàn)代替超鏈接中的title效果
ToolTip 通過(guò)Js實(shí)現(xiàn)代替超鏈接中的title效果，需要的朋友可以參考下。2011-04-04
js實(shí)現(xiàn)屏蔽默認(rèn)快捷鍵調(diào)用自定義事件示例
本文要說(shuō)的是如何屏蔽默認(rèn)的快捷鍵后去執(zhí)行自定義的事件，下面以一個(gè)textarea中enter進(jìn)行保存的例子為大家詳細(xì)介紹下，感興趣的朋友可以參考下哈2013-06-06
微信小程序非swiper組件實(shí)現(xiàn)的自定義偽3D輪播圖效果示例
這篇文章主要介紹了微信小程序非swiper組件實(shí)現(xiàn)的自定義偽3D輪播圖效果,涉及微信小程序事件響應(yīng)及元素屬性動(dòng)態(tài)操作實(shí)現(xiàn)輪播圖效果相關(guān)技巧與注意事項(xiàng),需要的朋友可以參考下2018-12-12