极客教程Bootstrap 5 小表格
Bootstrap 5小型表格是用来创建小尺寸的表格的。这些表格只是普通表格的缩小版。
Bootstrap 5小表类：
- table-sm。通过使用这个类，我们可以通过将所有单元格的填充物减半，将一个正常的表格转换成一个较小的表格。
语法:
<table class="table table-sm">
...
</table>
例子1：这里我们将创建一个不包含任何标题或脚注的小表格。
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head>
<body class="m-3">
<center>
<h1 class="text-success">
GeeksforGeeks
</h1>
<strong>Bootstrap 5 Tables Small Table</strong>
</center>
<table class="table table-sm">
<thead>
<tr>
<th scope="col">No</th>
<th scope="col">Course</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>HTML- Basics</td>
<td>29</td>
</tr>
<tr>
<th scope="row">2</th>
<td>CSS- Basics</td>
<td>25</td>
</tr>
<tr>
<th scope="row">3</th>
<td>JS- Basics</td>
<td>$35</td>
</tr>
</tbody>
</table>
</body>
</html>
输出:
Bootstrap 5 小表格
例子2：在这个例子中，我们将像在普通表格中那样附加页脚和标题，但要用一个小表格。
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head>
<body class="m-3">
<center>
<h1 class="text-success">
GeeksforGeeks
</h1>
<strong>Bootstrap 5 Tables Small Table</strong>
</center>
<table class="table caption-top table-sm">
<caption>Front-end Courses</caption>
<thead class="table-light">
<tr>
<th scope="col">No</th>
<th scope="col">Course</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>HTML- Basics</td>
<td>29</td>
</tr>
<tr>
<th scope="row">2</th>
<td>CSS- Basics</td>
<td>25</td>
</tr>
<tr>
<th scope="row">3</th>
<td>JS- Basics</td>
<td>35</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row"></th>
<td>Front-End Bundle</td>
<td>89</td>
</tr>
</tfoot>
</table>
</body>
</html>
输出:
Bootstrap 5 小表格