示例 2 : 带斑马线的表格 示例 3 : 带边框的表格 示例 4 : 有鼠标悬停状态的表格 示例 5 : 更加紧凑的表格 示例 6 : 多种表格效果整合在一起 示例 7 : 激活样式 示例 8 : 成功样式 示例 9 : 信息样式 示例 10 : 警告样式 示例 11 : 危险样式
拥有横向分割线的表格,宽度占用父容器的
<!DOCTYPE html>
<script src="https://how2j.cn/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
<table class="table">
<thead>
<th>头像</th>
<th>名字</th>
<th>HP</th>
</thead>
<tbody>
<tr>
<td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/gareen.png"/></td>
<td>盖伦</td>
<td>616</td>
</tr>
<tr>
<td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/teemo.png"/></td>
<td>提莫</td>
<td>383</td>
</tr>
<tr>
<td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/akali.png"/></td>
<td>阿卡丽</td>
<td>448</td>
</tr>
</tbody>
</table>
通过斑马线把奇偶行的区别表现出来
<!DOCTYPE html>
<script src="https://how2j.cn/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
<table class="table table-striped">
<thead>
<th>头像</th>
<th>名字</th>
<th>HP</th>
</thead>
<tbody>
<tr>
<td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/gareen.png"/></td>
<td>盖伦</td>
<td>616</td>
</tr>
<tr>
<td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/teemo.png"/></td>
<td>提莫</td>
<td>383</td>
</tr>
<tr>
<td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/akali.png"/></td>
<td>阿卡丽</td>
<td>448</td>
</tr>
</tbody>
</table>
给表格的单元格加上边框
<!DOCTYPE html>
<script src="https://how2j.cn/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
<table class="table table-bordered">
<thead>
<th>头像</th>
<th>名字</th>
<th>HP</th>
</thead>
<tbody>
<tr>
<td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/gareen.png"/></td>
<td>盖伦</td>
<td>616</td>
</tr>
<tr>
<td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/teemo.png"/></td>
<td>提莫</td>
<td>383</td>
</tr>
<tr>
<td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/akali.png"/></td>
<td>阿卡丽</td>
<td>448</td>
</tr>
</tbody>
</table>
鼠标悬停高亮显示
<!DOCTYPE html>
<script src="https://how2j.cn/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
<table class="table table-hover">
<thead>
<th>头像</th>
<th>名字</th>
<th>HP</th>
</thead>
<tbody>
<tr>
<td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/gareen.png"/></td>
<td>盖伦</td>
<td>616</td>
</tr>
<tr>
<td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/teemo.png"/></td>
<td>提莫</td>
<td>383</td>
</tr>
<tr>
<td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/akali.png"/></td>
<td>阿卡丽</td>
<td>448</td>
</tr>
</tbody>
</table>
让表格更加紧凑
<!DOCTYPE html>
<script src="https://how2j.cn/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
<table class="table table-condensed">
<thead>
<th>头像</th>
<th>名字</th>
<th>HP</th>
</thead>
<tbody>
<tr>
<td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/gareen.png"/></td>
<td>盖伦</td>
<td>616</td>
</tr>
<tr>
<td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/teemo.png"/></td>
<td>提莫</td>
<td>383</td>
</tr>
<tr>
<td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/akali.png"/></td>
<td>阿卡丽</td>
<td>448</td>
</tr>
</tbody>
</table>
多种表格样式混合使用
<!DOCTYPE html>
<script src="https://how2j.cn/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
<table class="table table-striped table-bordered table-hover table-condensed">
<thead>
<th>头像</th>
<th>名字</th>
<th>HP</th>
</thead>
<tbody>
<tr>
<td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/gareen.png"/></td>
<td>盖伦</td>
<td>616</td>
</tr>
<tr>
<td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/teemo.png"/></td>
<td>提莫</td>
<td>383</td>
</tr>
<tr>
<td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/akali.png"/></td>
<td>阿卡丽</td>
<td>448</td>
</tr>
</tbody>
</table>
用于表示该行被选中
<!DOCTYPE html>
<script src="https://how2j.cn/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
<table class="table">
<thead>
<th>头像</th>
<th>名字</th>
<th>HP</th>
</thead>
<tbody>
<tr>
<td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/gareen.png"/></td>
<td>盖伦</td>
<td >616</td>
</tr>
<tr>
<td ><img width="20px" src="https://how2j.cn/study/bootstrap/lol/teemo.png"/></td>
<td >提莫</td>
<td >383</td>
</tr>
<tr class="active">
<td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/akali.png"/></td>
<td>阿卡丽</td>
<td>448</td>
</tr>
</tbody>
</table>
用于表示该行的信息是成功的
<!DOCTYPE html>
<script src="https://how2j.cn/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
<table class="table">
<thead>
<th>头像</th>
<th>名字</th>
<th>HP</th>
</thead>
<tbody>
<tr>
<td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/gareen.png"/></td>
<td>盖伦</td>
<td >616</td>
</tr>
<tr>
<td ><img width="20px" src="https://how2j.cn/study/bootstrap/lol/teemo.png"/></td>
<td >提莫</td>
<td >383</td>
</tr>
<tr class="success">
<td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/akali.png"/></td>
<td>阿卡丽</td>
<td>448</td>
</tr>
</tbody>
</table>
用于表示该行的信息是正常的
<!DOCTYPE html>
<script src="https://how2j.cn/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
<table class="table">
<thead>
<th>头像</th>
<th>名字</th>
<th>HP</th>
</thead>
<tbody>
<tr>
<td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/gareen.png"/></td>
<td>盖伦</td>
<td >616</td>
</tr>
<tr>
<td ><img width="20px" src="https://how2j.cn/study/bootstrap/lol/teemo.png"/></td>
<td >提莫</td>
<td >383</td>
</tr>
<tr class="info">
<td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/akali.png"/></td>
<td>阿卡丽</td>
<td>448</td>
</tr>
</tbody>
</table>
用于表示该行的信息有疑问
<!DOCTYPE html>
<script src="https://how2j.cn/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
<table class="table">
<thead>
<th>头像</th>
<th>名字</th>
<th>HP</th>
</thead>
<tbody>
<tr>
<td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/gareen.png"/></td>
<td>盖伦</td>
<td >616</td>
</tr>
<tr>
<td ><img width="20px" src="https://how2j.cn/study/bootstrap/lol/teemo.png"/></td>
<td >提莫</td>
<td >383</td>
</tr>
<tr class="warning">
<td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/akali.png"/></td>
<td>阿卡丽</td>
<td>448</td>
</tr>
</tbody>
</table>
用于表示该行的信息有错误
<!DOCTYPE html>
<script src="https://how2j.cn/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
<table class="table">
<thead>
<th>头像</th>
<th>名字</th>
<th>HP</th>
</thead>
<tbody>
<tr>
<td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/gareen.png"/></td>
<td>盖伦</td>
<td >616</td>
</tr>
<tr>
<td ><img width="20px" src="https://how2j.cn/study/bootstrap/lol/teemo.png"/></td>
<td >提莫</td>
<td >383</td>
</tr>
<tr class="danger">
<td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/akali.png"/></td>
<td>阿卡丽</td>
<td>448</td>
</tr>
</tbody>
</table>
HOW2J公众号,关注后实时获知最新的教程和优惠活动,谢谢。
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
|