阅读(1424)
赞(15)
Bootstrap的紧凑型表格
2016-09-07 19:39:39 更新
所谓紧凑型表格,即表格的显示比普通表格稍微紧凑一些,实现原理是减少单元格的内边距。使用方式如下:
<table class="table table-condensed">
...
</table>
<table class="table table-condensed">
...
</table>
运行效果下所示:
默认情况下表格的padding是8像素,紧凑型表格的padding值是5像素。源码如下:
// 源码1441行
.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
padding: 5px;
}
以上4种特效的样式可以混合在一起使用,从而制作出复杂而精美的表格。