Bootstrap CSS布局之表格

Bootstrap CSS布局之表格

表格组件中，BootStrap提供了

1种基础.table样式

4种附加样式(.table-striped/.table-bordered/.table-hover/.table-condensed)

1种支持响应式布局的.table-responsive

table样式

//源码

table {

background-color: transparent;

}

caption {

padding-top: 8px;

padding-bottom: 8px;

color: #777;

text-align: left;

}

th {

text-align: left;

}

.table {

width: 100%;

max-width: 100%;

margin-bottom: 20px;

}

.table > thead > tr > th,

.table > tbody > tr > th,

.table > tfoot > tr > th,

.table > thead > tr > dNtDfvaQtd,

.table > tbody > tr > td,

.table > tfoot > tr > td {

padding: 8px;

line-height: 1.42857143;

vertical-align: top;

border-top: 1px solid #ddd;

}

.table > thead > tr > th {

vertical-align: bottom;

border-bottom: 2px solid #ddd;

}

.table > caption + thead > tr:first-child > th,

.dNtDfvaQtable > colgroup + thead > tr:first-child > th,

.table > thead:first-child > tr:first-child > th,

.table > caption + thead > tr:first-child > td,

.table > colgroup + thead > tr:first-child > td,

.table > thead:first-child > tr:first-child > td {

border-top: 0;

}

.table > tbody + tbody {

border-top: 2px solid #ddd;

}

.table .table {

background-color: #fff;

}

table.striped样式–带背景条纹的表格

//源码

.table-striped > tbody > tr:nth-of-type(odd) {

background-color: #f9f9f9;

}

table.bordered样式–带边框的表格

为表格所有的单元格提供1条1像素宽的边框

//源码

.table-bordered {

border: 1px solid #ddd;

}

.table-bordered > thead > tr > th,

.table-bordered > tbody > tr > th,

.table-bordered > tfoot > tr > th,

.table-bordered > thead > tr > td,

.table-bordered > tbody > tr > td,

.table-bordered > tfoot > tr > td {

border: 1px solid #ddd;

}

.table-bordered > thead > tr > th,

.table-bordered > thead > tr > td {

border-bottom-width: 2px;

}

table.hover样式–鼠标悬停高亮的表格

table.condensed样式–紧凑型的表格

//源码

.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;

}

行级元素样式

Bootstrap为表格的tr元素提供了5种额外的样式，用于控制tr的背景颜色。active、success、info、warning、danger

//源码

.table > thead > tr > td.active,

.table > tbody > tr > td.active,

.table > tfoot > tr > td.active,

.table > thead > tr > th.active,

.table > tbody > tr > th.active,

.table > tfoot > tr > th.active,

.table > thead > tr.active > td,

.table > tbody > tr.active > td,

.table > tfoot > tr.active > td,

.table > thead > tr.active > th,

.table > tbody > tr.active > th,

.table > tfoot > tr.active > th {

background-color: #f5f5f5;

}

.table-hover > tbody > tr > td.active:hover,

.table-hover > tbody > tr > th.active:hover,

.table-hover > tbody > tr.active:hover > td,

.table-hover > tbody > tr:hover > .active,

.table-hover > tbody > tr.active:hover > th {

background-color: #e8e8e8;

}

.table > thead > tr > td.success,

.table > tbody > tr > td.success,

.table > tfoot > tr > td.success,

.table > thead > tr > th.success,

.table > tbody > tr > th.success,

.table > tfoot > tr > th.success,

.table > thead > tr.success > td,

.table > tbody > tr.success > td,

.table > tfoot > tr.success > td,

.table > thead > tr.success > th,

.table > tbody > tr.success > th,

.table > tfoot > tr.success > th {

background-color: #dff0d8;

}

.table-hover > tbody > tr > td.success:hover,

.table-hover > tbody > tr > th.success:hover,

.table-hover > tbody > tr.success:hover > td,

.table-hover > tbody > tr:hover > .success,

.table-hover > tbody > tr.success:hover > th {

background-color: #d0e9c6;

}

.table > thead > tr > td.info,

.table > tbody > tr > td.info,

.table > tfoot > tr > td.info,

.table > thead > tr > th.info,

.table > tbody > tr > th.info,

.table > tfoot > tr > th.info,

.table > thead > tr.info > td,

.table > tbody > tr.info > td,

.table > tfoot > tr.info > td,

.table > thead > tr.info > th,

.table > tbody > tr.info > th,

.table > tfoot > tr.info > th {

background-color: #d9edf7;

}

.table-hover > tbody > tr > td.info:hover,

.table-hover > tbody > tr > th.info:hover,

.table-hover > tbody > tr.info:hover > td,

.table-hover > tbody > tr:hover > .info,

.table-hover > tbody > tr.info:hover > th {

background-color: #c4e3f3;

}

.table > thead > tr > td.warning,

.table > tbody > tr > td.warning,

.table > tfoot > tr > td.warning,

.table > thead > tr > th.warning,

.table > tbody > tr > th.warning,

.table > tfoot > tr > th.warning,

.table > thead > tr.warning > td,

.table > tbody > tr.warning > td,

.table > tfoot > tr.warning > td,

.table > thead > tr.warning > th,

.table > tbody > tr.warning > th,

.table > tfoot > tr.warning > th {

background-color: #fcf8e3;

}

.table-hover > tbody > tr > td.warning:hover,

.table-hover > tbody > tr > th.warning:hover,

.table-hover > tbody > tr.warning:hover > td,

.table-hover > tbody > tr:hover > .warning,

.table-hover > tbody > tr.warning:hover > th {

background-color: #faf2cc;

}

.table > thead > tr > td.danger,

.table > tbody > tr > td.danger,

.table > tfoot > tr > td.danger,

.table > thead > tr > th.danger,

.table > tbody > tr > th.danger,

.table > tfoot > tr > th.danger,

.table > thead > tr.danger > td,

.table > tbody > tr.danger > td,

.table > tfoot > tr.danger > td,

.table > thead > tr.danger > th,

.table > tbody > tr.danger > th,

.table > tfoot > tr.danger > th {

background-color: #f2dede;

}

.table-hover > tbody > tr > td.danger:hover,

.table-hover > tbody > tr > th.danger:hover,

.table-hover > tbody > tr.danger:hover > td,

.table-hover > tbody > tr:hover > .danger,

.table-hover > tbody > tr.danger:hover > th {

background-color: #ebcccc;

}

响应式表格

随着响应式设计的大量需求，Bootstrap为表格提供了一个响应式设计的容器(.table-responsive),将.table-responsive样式包装在.table样式外部即可创建响应式表格

在小屏幕(<768px)水平滚动，大屏幕上水平滚动条消失

//源码

.table-responsive {

min-height: .01%;

overflow-x: auto;

}

//把原有.table样式得底部外边距margin-bottom从20px改成了0px，目的是消除滚动条带来的上下高度差

//并在.table-responsive样式上设置了一个margin-bottom:15px,避免和容器外部的下一个元素重叠

@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;

}

.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;

}

.table-responsive > .table-bordered {

border: 0;

}

//可以看到table-responsive给自己加了一个1px的外边框，如果在table上在使用table-bordered样式得话，就会和表格的外边框重合，就会变粗，所以进行了以下代码的编写

.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的第一个单元格(最左边的一列)的左边框设置为0px

}

.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 > tdNtDfvaQd:last-child,

.table-responsive > .table-bordered > tbody > tr > td:last-child,

.table-responsive > .table-bordered > tfoot > tr > td:last-child {

border-right: 0;//所有tr的最后一个单元格(最右边的一列)的左边框设置为0px

}

.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里的单元格的底部边框设置为0px

}

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。