Bootstrap CSS布局之表格
更新時間：2016年12月17日 09:32:14 作者：github_34514750
這篇文章主要為大家詳細(xì)介紹了Bootstrap CSS布局之表格的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
表格組件中，BootStrap提供了
1種基礎(chǔ).table樣式
4種附加樣式(.table-striped/.table-bordered/.table-hover/.table-condensed)
1種支持響應(yīng)式布局的.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 > td,
.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,
.table > 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樣式–鼠標(biāo)懸停高亮的表格
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;
}
響應(yīng)式表格
隨著響應(yīng)式設(shè)計(jì)的大量需求，Bootstrap為表格提供了一個響應(yīng)式設(shè)計(jì)的容器(.table-responsive),將.table-responsive樣式包裝在.table樣式外部即可創(chuàng)建響應(yīng)式表格
在小屏幕(<768px)水平滾動，大屏幕上水平滾動條消失
<div class="table-responsive"> <table class="table"> </table> </div>
//源碼
.table-responsive {
min-height: .01%;
overflow-x: auto;
}
//把原有.table樣式得底部外邊距margin-bottom從20px改成了0px，目的是消除滾動條帶來的上下高度差
//并在.table-responsive樣式上設(shè)置了一個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樣式得話，就會和表格的外邊框重合，就會變粗，所以進(jìn)行了以下代碼的編寫
.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的第一個單元格(最左邊的一列)的左邊框設(shè)置為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 > 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的最后一個單元格(最右邊的一列)的左邊框設(shè)置為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里的單元格的底部邊框設(shè)置為0px
}
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JS表格組件神器bootstrap table詳解（基礎(chǔ)版）
- Angular.js與Bootstrap相結(jié)合實(shí)現(xiàn)表格分頁代碼
- JS組件Bootstrap Table表格行拖拽效果實(shí)現(xiàn)代碼
- BootStrap和jQuery相結(jié)合實(shí)現(xiàn)可編輯表格
- JS組件Bootstrap Table表格多行拖拽效果實(shí)現(xiàn)代碼
- BootStrap table表格插件自適應(yīng)固定表頭(超好用)
- 基于Bootstrap使用jQuery實(shí)現(xiàn)簡單可編輯表格
- 值得分享的輕量級Bootstrap Table表格插件
- 基于Bootstrap3表格插件和分頁插件實(shí)例詳解
- JS表格組件神器bootstrap table詳解（強(qiáng)化版）
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)購物車基本功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
打開新窗口關(guān)閉當(dāng)前頁面不彈出關(guān)閉提示js代碼
打開新窗口關(guān)閉當(dāng)前頁面時總是彈出提示框，有沒有辦法避免它的彈出呢，答案是可以的接下來為大家分享一個方法可以解決此問題，感興趣的你可不要錯過了哈，希望可以幫助到你2013-03-03
在JavaScript中，null和undefined是兩個常見的數(shù)據(jù)類型，本文就詳細(xì)的介紹了JS中null和undefined的區(qū)別，感興趣的可以了解一下2023-05-05
這篇文章主要介紹了JS中的柯里化(currying),需要的朋友可以參考下2017-08-08
javascript 一個函數(shù)對同一元素的多個事件響應(yīng)
具體方法如下該方法實(shí)現(xiàn)了對一個按鈕的mouseover和click事件的響應(yīng)2009-07-07
JS數(shù)據(jù)類型（基本數(shù)據(jù)類型、引用數(shù)據(jù)類型）及堆和棧的區(qū)別分析
這篇文章主要介紹了JS數(shù)據(jù)類型（基本數(shù)據(jù)類型、引用數(shù)據(jù)類型）及堆和棧的區(qū)別,結(jié)合實(shí)例形式分析了JS基本數(shù)據(jù)類型、引用數(shù)據(jù)類型概念、用法,以及堆和棧的區(qū)別,需要的朋友可以參考下2020-03-03
JavaScript運(yùn)動框架 解決速度正負(fù)取整問題(一)
這篇文章主要為大家詳細(xì)介紹了JavaScript運(yùn)動框架的第一部分，解決速度正負(fù)取整問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
JS獲取月份最后天數(shù)、最大天數(shù)與某日周數(shù)的方法
這篇文章主要介紹了JS獲取月份最后天數(shù)、最大天數(shù)與某日周數(shù)的方法,涉及JavaScript針對日期與實(shí)現(xiàn)的相關(guān)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-12-12
淺談TypeScript 用 Webpack/ts-node 運(yùn)行的配置記錄
這篇文章主要介紹了淺談TypeScript 用 Webpack/ts-node 運(yùn)行的配置記錄，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
JS簡單實(shí)現(xiàn)滑動加載數(shù)據(jù)的方法示例
這篇文章主要介紹了JS簡單實(shí)現(xiàn)滑動加載數(shù)據(jù)的方法,涉及javascript事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2017-10-10