Bootstrap 表格
使用Bootstrap创建一个简单的表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-xl bg-light text-dark border">
<table class="table">
<thead>
<th>#</th>
<th>Name</th>
<th>Price</th>
<th>Categories</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bananas</td>
<td>$10</td>
<td>Fruits</td>
</tr>
<tr>
<td>2</td>
<td>Apple</td>
<td>$5</td>
<td>Fruits</td>
</tr>
<tr>
<td>3</td>
<td>Orange</td>
<td>$6</td>
<td>Fruits</td>
</tr>
<tr>
<td>4</td>
<td>Pork</td>
<td>$20</td>
<td>Meat</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
创建带背景颜色的表格
Bootstrap5 可以提供类如 .table-primary，.table-secondary，.table-success，.table-danger，.table-warning，.table-info，.table-light和.table-dark等对表格的背景添加颜色，也可以对表中的行或单单元格进行颜色的添加。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-xl bg-light text-dark border">
<table class="table table-dark">
<thead>
<th>#</th>
<th>Name</th>
<th>Price</th>
<th>Categories</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bananas</td>
<td>$10</td>
<td>Fruits</td>
</tr>
<tr>
<td>2</td>
<td>Apple</td>
<td>$5</td>
<td>Fruits</td>
</tr>
<tr>
<td>3</td>
<td>Orange</td>
<td>$6</td>
<td>Fruits</td>
</tr>
<tr>
<td>4</td>
<td>Pork</td>
<td>$20</td>
<td>Meat</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
table-dark
table-danger
table-info
table-primary
table-secondary
table-warning
table-success
table-light
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-xl bg-light text-dark border">
<table class="table table-light">
<thead class="table-success">
<th>#</th>
<th>Name</th>
<th>Price</th>
<th>Categories</th>
</thead>
<tbody>
<tr class="table-info">
<td>1</td>
<td>Bananas</td>
<td>$10</td>
<td>Fruits</td>
</tr>
<tr class="table-danger">
<td>2</td>
<td>Apple</td>
<td>$5</td>
<td>Fruits</td>
</tr>
<tr class="table-dark">
<td>3</td>
<td>Orange</td>
<td>$6</td>
<td>Fruits</td>
</tr>
<tr class="table-warning">
<td>4</td>
<td>Pork</td>
<td>$20</td>
<td>Meat</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
创建带条纹行的表
我们还可以通过简单地向 .table 基类添加一个额外的类 .table-striped 来向 <tbody> 中的行添加斑马条纹，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-xl bg-light text-dark border">
<table class="table table-striped">
<thead>
<th>#</th>
<th>Name</th>
<th>Price</th>
<th>Categories</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bananas</td>
<td>$10</td>
<td>Fruits</td>
</tr>
<tr>
<td>2</td>
<td>Apple</td>
<td>$5</td>
<td>Fruits</td>
</tr>
<tr>
<td>3</td>
<td>Orange</td>
<td>$6</td>
<td>Fruits</td>
</tr>
<tr>
<td>4</td>
<td>Pork</td>
<td>$20</td>
<td>Meat</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
带有边框的表格
通过将类 .table-bordered 添加到 .table 基类创建的表格上，就可以在表格和单元格的所有边上添加边框，如以下示例所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-xl bg-light text-dark border">
<table class="table table-striped table-bordered">
<thead>
<th>#</th>
<th>Name</th>
<th>Price</th>
<th>Categories</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bananas</td>
<td>$10</td>
<td>Fruits</td>
</tr>
<tr>
<td>2</td>
<td>Apple</td>
<td>$5</td>
<td>Fruits</td>
</tr>
<tr>
<td>3</td>
<td>Orange</td>
<td>$6</td>
<td>Fruits</td>
</tr>
<tr>
<td>4</td>
<td>Pork</td>
<td>$20</td>
<td>Meat</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
无边框表格
.table-borderless 类可以设置一个无边框的表格：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-xl bg-light text-dark border">
<table class="table table-striped table-borderless">
<thead>
<th>#</th>
<th>Name</th>
<th>Price</th>
<th>Categories</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bananas</td>
<td>$10</td>
<td>Fruits</td>
</tr>
<tr>
<td>2</td>
<td>Apple</td>
<td>$5</td>
<td>Fruits</td>
</tr>
<tr>
<td>3</td>
<td>Orange</td>
<td>$6</td>
<td>Fruits</td>
</tr>
<tr>
<td>4</td>
<td>Pork</td>
<td>$20</td>
<td>Meat</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
在表格行上启用悬停状态
联合使用 .table-dark 和 .table-hover 类可以设置黑色背景表格的鼠标悬停效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-xl">
<table class="table table-striped table-borderless table-hover">
<thead>
<th>#</th>
<th>Name</th>
<th>Price</th>
<th>Categories</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bananas</td>
<td>$10</td>
<td>Fruits</td>
</tr>
<tr>
<td>2</td>
<td>Apple</td>
<td>$5</td>
<td>Fruits</td>
</tr>
<tr>
<td>3</td>
<td>Orange</td>
<td>$6</td>
<td>Fruits</td>
</tr>
<tr>
<td>4</td>
<td>Pork</td>
<td>$20</td>
<td>Meat</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
设置表头颜色
我们也可以设置表头的颜色，例如 .table-dark 类用于给表头添加黑色背景， .table-light类用于给表头添加灰色背景:
把这个属性加在<thead>标签中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-xl">
<table class="table table-striped table-borderless table-hover table-warning">
<thead class="table-dark">
<th>#</th>
<th>Name</th>
<th>Price</th>
<th>Categories</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bananas</td>
<td>$10</td>
<td>Fruits</td>
</tr>
<tr>
<td>2</td>
<td>Apple</td>
<td>$5</td>
<td>Fruits</td>
</tr>
<tr>
<td>3</td>
<td>Orange</td>
<td>$6</td>
<td>Fruits</td>
</tr>
<tr>
<td>4</td>
<td>Pork</td>
<td>$20</td>
<td>Meat</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
使用 Bootstrap 创建响应式表
.table-responsive 类用于创建响应式表格：在屏幕宽度小于 992px 时会创建水平滚动条，如果可视区域宽度大于 992px 则显示不同效果（没有滚动条）:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap5 响应式表格 - 迹忆客(jiyik.com)</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
/* Custom style to make this example easy to understand */
table * {
white-space: nowrap;
}
</style>
</head>
<body>
<div class="m-4">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Biography</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Clark</td>
<td>Kent</td>
<td>clarkkent@mail.com</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
</tr>
<tr>
<td>2</td>
<td>John</td>
<td>Carter</td>
<td>johncarter@mail.com</td>
<td>Vestibulum consectetur scelerisque bibendum scelerisque purus.</td>
</tr>
<tr>
<td>3</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker@mail.com</td>
<td>Integer pulvinar leo id risus interdum vel metus dignissim.</td>
</tr>
</tbody>
</table>
</div>
<p class="mt-4"><strong>Note:</strong> Change the editor layout/orientation to see how responsive table works.</p>
</div>
</body>
</html>