BS3 Tables
簡介
在 BS3 中，表格的 CSS 基礎類別就是 .table，固定搭配 <table> 及其相關的標記一齊使用。預設時，底色為白色，沒有邊框。其它的修飾類別有：
- .table-bordered
- 建立表格的邊框。
- .table-striped
- 單數列和雙數列用不同底色表示，
- .table-hover
- 當游標移至列上方時，改變該列的底色。
- .table-condensed
- 縮減各表格元件間的間隔和留白，讓表格顯得比較緊湊，所佔的空間比較小。
- .table-responsive
- 這個修飾類別比較特別。表格在預設情況下，當螢幕縮小時，表格會增加格子內容的高度，以完全顯示內容。如果使用了 .table-responsive 這個修飾類別，當螢幕尺寸小於 768px 時，表格便不會以增加格子的高度以容納所有內容，而是產生一個水平捲軸，讓使用者以捲動的方式來觀看內容。另外，使用這個修飾類別的方式是在 .table 元件的外面，再加上一個具有 .table-responsive 的 <div> 元件，請參考範例。
除了以上的修飾類別外，尚有用來改變元件底色的修飾類別，這些類別可以應用在 <tr> 或 <td*gt; 的元件上。修改底色的䫶別如下：
- .success
- .info
- .warning
- .danger
以下為 BS3 v3.3.6 的 bootstrap.css 樣式表中有關 .table 的部份樣式設定，這裡只列出了比較重要的一部份，其它沒有列出的部份都是在修改底色及間距，為了節省篇幅，就不在這裡列出了。
.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-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-striped > tbody > tr:nth-of-type(odd) {
background-color: #f9f9f9;
}
.table-hover > tbody > tr:hover {
background-color: #f5f5f5;
}
table col[class*="col-"] {
position: static;
display: table-column;
float: none;
}
table td[class*="col-"],
table th[class*="col-"] {
position: static;
display: table-cell;
float: none;
}
.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;
}
.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 > .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;
}
.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;
}
.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;
}
}
範例
範例中展示了二個表格，各應用了不同的修飾類別，以展示各修示類別的作用。下方的表格在螢幕縮小至 768px 以下時，會產生水平捲軸，可以左右移動表格，以觀看內容。表格中有一列中的內容特別長，在變更螢幕尺寸時，注意一下這一列的變化。
CSS
<style>
html {
width:100%;
height:100%;
}
body {
margin: 0 auto;
max-width: 1000px;
padding: 20px;
}
</style>
CSS 中沒有特別的樣式需要定義。
HTML
<body>
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Cell | Cell | Cell |
| Cell | Cell | Cell |
| Cell | Cell | Cell |
| Footer 1 | Footer 2 | Footer 3 |
| Header 1 | Header 2 | Header 3 | Header 4 |
|---|---|---|---|
| A very long text content here ... | A very long text content here ... | A very long text content here ... | A very long text content here ... |
| Cell | Cell | Cell | Cell |
| Cell | Cell | Cell | Cell |
第 24 行，.danger 應用在 <td&gr; 的標記中。
注意第 36 行，.table-responsive 所在的位置，必須包覆定義 .table 類別的元件。
第 59 行， .warning 應用在 <tr> 的標記中。
