bootstrap4如何设置表格

Bootstrap4 基础表格

Bootstrap4 通过 .table 类来设置基础表格的样式，实例如下:

实例

<table class="table">
 <thead>
 <tr>
 <th>Firstname</th>
 <th>Lastname</th>
 <th>Email</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>John</td>
 <td>Doe</td>
 <td>john@example.com</td>
 </tr>
 <tr>
 <td>Mary</td>
 <td>Moe</td>
 <td>mary@example.com</td>
 </tr>
 <tr>
 <td>July</td>
 <td>Dooley</td>
 <td>july@example.com</td>
 </tr>
 </tbody>
</table>

条纹表格

通过添加 .table-striped 类，您将在 <tbody> 内的行上看到条纹，如下面的实例所示：

实例

<table class="table table-striped"> 
<thead> 
<tr> 
<th>Firstname</th> 
<th>Lastname</th> 
<th>Email</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>John</td> 
<td>Doe</td> 
<td>john@example.com</td> 
</tr> 
<tr> 
<td>Mary</td> 
<td>Moe</td> 
<td>mary@example.com</td> 
</tr> 
<tr> 
<td>July</td> 
<td>Dooley</td> 
<td>july@example.com</td> 
</tr> 
</tbody></table>

带边框表格

.table-bordered 类可以为表格添加边框

实例

<table class="table table-bordered"> 
<thead> 
<tr> 
<th>Firstname</th> 
<th>Lastname</th> 
<th>Email</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>John</td> 
<td>Doe</td> 
<td>john@example.com</td> 
</tr> 
<tr> 
<td>Mary</td> 
<td>Moe</td> 
<td>mary@example.com</td> 
</tr> 
<tr> 
<td>July</td> 
<td>Dooley</td> 
<td>july@example.com</td> 
</tr> 
</tbody></table>

鼠标悬停状态表格

.table-hover 类可以为表格的每一行添加鼠标悬停效果（灰色背景）：

实例

<table class="table table-hover"> 
<thead> 
<tr> 
<th>Firstname</th> 
<th>Lastname</th> 
<th>Email</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>John</td> 
<td>Doe</td> 
<td>john@example.com</td> 
</tr> 
<tr> 
<td>Mary</td> 
<td>Moe</td> 
<td>mary@example.com</td> 
</tr> 
<tr> 
<td>July</td> 
<td>Dooley</td> 
<td>july@example.com</td> 
</tr> 
</tbody></table>

黑色背景表格

.table-dark 类可以为表格添加黑色背景：

实例

<table class="table table-dark"> 
<thead> 
<tr> 
<th>Firstname</th> 
<th>Lastname</th> 
<th>Email</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>John</td> 
<td>Doe</td> 
<td>john@example.com</td> 
</tr> 
<tr> 
<td>Mary</td> 
<td>Moe</td> 
<td>mary@example.com</td> 
</tr> 
<tr> 
<td>July</td> 
<td>Dooley</td> 
<td>july@example.com</td> 
</tr> 
</tbody></table>