您的位置:首页 > Web前端 > BootStrap

关于bootstrap--表格(table的各种样式)

2020-08-24 19:11 1226 查看

1、table-striped:斑马线表格

2、table-bordered:带边框的表格

3、table-hover:鼠标悬停高亮的表格

4、table-condensed:紧凑型表格(单元格的内距由8px调至5px。)

5、table-responsive:响应式表格(当你的浏览器可视区域小于768px时,表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时,表格底部水平滚动条就会消失)

6、“.table”主要有三个作用:

☑ 给表格设置了margin-bottom:20px以及设置单元内距

☑ 在thead底部设置了一个2px的浅灰实线

☑ 每个单元格顶部设置了一个1px的浅灰实线

<table class="table">
<thead>
<tr>
<th>表格标题</th>
<th>表格标题</th>
<th>表格标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
</tbody>
</table>

转载于:https://www.cnblogs.com/HUIWANG/p/11017108.html

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: