https://www.runoob.com/try/try.php?filename=bootstrap3-table-striped
| 名称 | 城市 | 邮编 |
|---|---|---|
| Tanmay | Bangalore | 560001 |
| Sachin | Mumbai | 400003 |
| Uma | Pune | 411027 |
table 最基本
table-striped 条纹
table-bordered 外边框
table-hover 当指针悬停在行上时会出现浅灰色背景
table-condensed 行内边距（padding）被切为两半，以便让表看起来更紧凑
table-responsive 您可以让表格水平滚动以适应小型设备（小于 768px）
引用：https://www.runoob.com/try/try.php?filename=bootstrap3-table-striped
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 条纹表格</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-striped table-bordered table-hover table-condensed table-responsive">
<caption>条纹表格布局</caption>
<thead>
<tr class="active">
<th>名称</th>
<th>城市</th>
<th>邮编</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr class="warning">
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr class="danger">
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>
</body>
</html>
table 最基本
table-striped 条纹
table-bordered 外边框
table-hover 当指针悬停在行上时会出现浅灰色背景
table-condensed 行内边距（padding）被切为两半，以便让表看起来更紧凑
table-responsive 您可以让表格水平滚动以适应小型设备（小于 768px）
9256
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
