bootstrap是通过添加 .table-bordered 类来给表格添加边框。
1、代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Gutters Example</title>
<!-- 引入 Bootstrap 样式文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>带边框表格</h1>
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Doe</td>
<td>@johndoe</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>Doe</td>
<td>@janedoe</td>
</tr>
<tr>
<td>3</td>
<td>Mark</td>
<td>Smith</td>
<td>@marksmith</td>
</tr>
</tbody>
</table>
</div>
<!-- 引入 Bootstrap JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js"></script>
</body>
</html>2、设置边框颜色和大小
.table-bordered {
border: 1px solid red;
}这将设置表格的边框为 1 像素宽的红色边框。
正文完