bootstrap 中表格怎么添加

发布网友发布时间：2022-05-02 05:55

共2个回答

懂视网时间：2022-05-12 02:28

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>

热心网友时间：2022-05-11 23:36

　　多上班族在表格中插入表格，小编教你一个很简单的方法。
　　点击插入单元格下面的对象，然后选择由文件创建。

　　选择好文件之后，在显示为图标前面的框框里面打勾，然后可以在更改图标里面修改文件的路径。
　　确定之后再查看原来的表格，发现这个表格已经插入进去了。这样就可以了。在这里面的表格只要双击就可以打开查看里面的数据了。