配合bootstrap实现的table 嵌套table

不要忘了引入bootstrap.css库

html部分

		<div class="container">
			<div class="row">
				<div class="col-sm-10">
					<table class="table table-bordered">
						<thead style="background: #ccc;">
							<tr>
								<th>会被清仓代码</th>
								<th>操作</th>
								<th>不会被清仓代码</th>
							</tr>
						</thead>
						<tbody>
							<td style="width: 330px;">
								<ul class="hidden">
									<li>
										<span><input type="checkbox" /></span>
										<span>1</span>
										<span>股票代码的详细信息</span>
									</li>
									<li>
										<span><input type="checkbox" /></span>
										<span>1</span>
										<span>股票代码的详细信息</span>
									</li>
								</ul>
							</td>
							<td class="text-center" style="width: 118px;">
								<div style="display: inline-block;">
									<div class="btn btn-default">向右</div>
									<div>向左</div>
								</div>
							</td>
							<td style="width: 330px;">
								<ul class="hidden">
									<li>
										<span><input type="checkbox" /></span>
										<span>1</span>
										<span>股票代码的详细信息</span>
									</li>
									<li>
										<span><input type="checkbox" /></span>
										<span>1</span>
										<span>股票代码的详细信息</span>
									</li>
								</ul>
							</td>
						</tbody>
						<tfoot>
							<tr>
								<td>
									<label><input type="checkbox" />全选</label>
								</td>
								<td></td>
								<td>
									<label><input type="checkbox" />全选</label>
								</td>
							</tr>
						</tfoot>
					</table>
				</div>
			</div>
		</div>

　　

转载于:https://www.cnblogs.com/webSong/p/6346579.html