Bootstrap响应式表格

随着响应式设计的大量需求,Bootstrap为表格也提供了一个响应式设计的容器(.tableresponsive样式),将.table-responsive样式包装在.table样式外部即可创建响应式表格,其会在小屏幕设备上(小于768像素)水平滚动。而当屏幕大于768像素宽度时,水平滚动条消失。示例如下:

<div class="table-responsive">
<table class="table">
....
</table>
</div>

运行结果如图:
jietu
响应式表格的实现原理是利用了CSS的媒体查询特性,在小于768像素的设备上应用@media(max-width: 767px)里的样式。该样式主要有3个方面的设置:
1、对.table-responsive容器边框以及滚动条进行了设置。
2、把原有.table样式的底部外边距margin-bottom从20像素改为了0像素,其目的是消除滚动条带来的上下高度差,并在.table-responsive样式上又设置了一个marginbottom: 15px,以避免和容器外部的下一个元素重叠。
3、将所有单元格的文本设置成不自动换行,以保留原有样式。

.table-responsive {
min-height: .01%;
overflow-x: auto;
}
@media screen and (max-width: 767px) {
.table-responsive {
width: 100%;
margin-bottom: 15px; /* 设置底部外边距,避免重叠 */
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd; /* 设置1像素的边框 */
}
.table-responsive > .table {
margin-bottom: 0;
}
.table-responsive > .table > thead > tr > th,
.table-responsive > .table > tbody > tr > th,
.table-responsive > .table > tfoot > tr > th,
.table-responsive > .table > thead > tr > td,
.table-responsive > .table > tbody > tr > td,
.table-responsive > .table > tfoot > tr > td {
white-space: nowrap; /* 确保单元格中的文本不会换行 直到遇到 <br> 标签为止 */
}
.table-responsive > .table-bordered {
border: 0; /* 将整个表格的外边框设置为0像素 */
}
.table-responsive > .table-bordered > thead > tr > th:first-child,
.table-responsive > .table-bordered > tbody > tr > th:first-child,
.table-responsive > .table-bordered > tfoot > tr > th:first-child,
.table-responsive > .table-bordered > thead > tr > td:first-child,
.table-responsive > .table-bordered > tbody > tr > td:first-child,
.table-responsive > .table-bordered > tfoot > tr > td:first-child {
border-left: 0; /* 将所有tr的第一个单元格的左边框设置为0像素 */
}
.table-responsive > .table-bordered > thead > tr > th:last-child,
.table-responsive > .table-bordered > tbody > tr > th:last-child,
.table-responsive > .table-bordered > tfoot > tr > th:last-child,
.table-responsive > .table-bordered > thead > tr > td:last-child,
.table-responsive > .table-bordered > tbody > tr > td:last-child,
.table-responsive > .table-bordered > tfoot > tr > td:last-child {
border-right: 0; /* 将所有tr的最后一个单元格的右边框设置为0像素 */
}
.table-responsive > .table-bordered > tbody > tr:last-child > th,
.table-responsive > .table-bordered > tfoot > tr:last-child > th,
.table-responsive > .table-bordered > tbody > tr:last-child > td,
.table-responsive > .table-bordered > tfoot > tr:last-child > td {
border-bottom: 0; /* 将最后一行tr里的单元格的底部边框设置为0像素 */
}
}

您可能还喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注