码迷,mamicode.com
首页 > 其他好文 > 详细

配合bootstrap实现的table 嵌套table

时间:2017-01-24 10:55:04      阅读:581      评论:0      收藏:0      [点我收藏+]

标签:put   bootstrap   trap   html   ble   style   splay   row   ext   

不要忘了引入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>

  

配合bootstrap实现的table 嵌套table

标签:put   bootstrap   trap   html   ble   style   splay   row   ext   

原文地址:http://www.cnblogs.com/webSong/p/6346579.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!