Bootstrap-表結合セル
1、問題の背景
Bootstrapを使用して表を設計し、表はセルをマージする必要があります.
2、ソースコードを実現する
3、実現結果
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="">
<link rel="icon" href="js/bootstrap-3.3.5/docs/favicon.ico">
<title>Bootstrap- </title>
<link rel="stylesheet" href="js/bootstrap-3.3.5/dist/css/bootstrap.css" />
<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
<script type="text/javascript" src="js/bootstrap-3.3.5/dist/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="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </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、実現結果