实践演练：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tableindex</title>
<link href="bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- table-responsive:响应式 -->
<div class="container table-responsive">
<table class="table">
<thead>
<tr>
<th>表格标题</th>
<th>表格标题</th>
<th>表格标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
</tbody>
</table>
<!-- 条纹状表格，斑马线表格 在原基础上加table-striped
table-bordered:给表格加边框
table-hover：鼠标悬停 -->
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>表格标题</th>
<th>表格标题</th>
<th>表格标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
</tbody>
</table>
<!-- 条纹状表格，斑马线表格 在原基础上加table-striped
table-bordered:给表格加边框
table-hover：鼠标悬停
table-condensed:紧凑型表格
状态: success绿色，info蓝色，warning黄色，danger红色-->
<table class="table table-striped table-bordered table-hover table-condensed">
<thead>
<tr>
<th>表格标题</th>
<th>表格标题</th>
<th>表格标题</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>表格单元格表格单元格</td>
<td>表格单元格表格单元格</td>
<td>表格单元格表格单元格</td>
</tr>
<tr class="info">
<td>表格单元格表格单元格</td>
<td>表格单元格表格单元格</td>
<td>表格单元格表格单元格</td>
</tr>
<tr class="warning">
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
<tr class="danger">
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>显示效果：
2830
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
