本文介绍了一个使用HTML和Bootstrap创建带有多种样式的响应式表格的例子，包括边框、鼠标悬停和隔行变色效果。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title></title>
<link rel="stylesheet" href="css/bootstrap.css"/>
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container table-responsive">
<!-- .table 边框合并
.table-bordered 带边框的表格
.table-striped 隔行变色的表格
.table-hover 带鼠标悬停效果的表格
.table-primary/success/danger/info/warning/dark/light 表格颜色
.table-responsive 响应式表格（用于table的父元素上）-->
<table class="table table-bordered table-hover table-striped">
<tr class="bg-primary">
<td>姓名</td>
<td>年龄</td>
<td>身高</td>
</tr>
<tr>
<td>tom</td>
<td>21</td>
<td>175</td>
</tr>
<tr>
<td>hanmeimei</td>
<td>20</td>
<td>165</td>
</tr>
<tr>
<td>lucy</td>
<td>21</td>
<td>160</td>
</tr>
</table>
</div>
</body>
</html>
扫一扫
545
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
