【Bootstrap】表格的CSS佈局
阿新 • • 發佈：2019-01-22
表格在開發中經常會用到，尤其是在展示資料的時候，一個美觀的表格設計非常重要。Bootstrap提供了表格元件，其中包括1種基礎.table樣式，4種附加樣式（.table-striped，.table-bordered，.table-hover，.table-condensed）以及一個支援響應式佈局的.table-responsive容器樣式。需要注意的是每種樣式都是在.table樣式的基礎上聯合應用才有效。
補充：
為了讓大表格(table)在下載的時候可以分段的顯示,就是說在瀏覽器解析HTML時，table是作為一個整體解釋的，使用TBODY可以優化顯示。如果表格很長，用tbody分段，可以一部分一部分地顯示，不用等整個表格都下載完成。下載一塊顯示一塊，表格巨大時有比較好的效果。
tbody、tfoot、thead一般來說用得不是很多，對於比較複雜的頁面，頁面的排版用到了很多的表格，表格的結構也就相對的複雜了，所以又將表格分割成三個部分：題頭、正文和腳註。而這三部分分別用: thead, tbody, tfoot來標註。
- thead 表格的頭 用來放標題之類的東西
- tbody 表格的身體 放資料本體
- tfoot 表格的腳 放表格的腳註之類
1、基礎樣式
基礎樣式只需要在table元素上加上類名.table即可製作出比較漂亮的表格。示例如下：
這裡寫一個簡單的例子：<table class="table"> …… </table>
執行效果如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="css/bootstrap.css" type="text/css" rel="stylesheet"> <title>Table</title> </head> <body> <table class="table"> <tbody> <tr> <th>姓名</th> <th>畢業學校</th> <th>聯絡方式</th> <th>地址</th> </tr> <tr> <td>張三</td> <td>李四</td> <td>王五</td> <td>陳六</td> </tr> <tr> <td>清華大學</td> <td>北京大學</td> <td>浙江大學</td> <td>廈門大學</td> </tr> <tr> <td>13122222222</td> <td>13233333333</td> <td>15644444444</td> <td>17866666666</td> </tr> <tr> <td>中國XX省XX市XX縣</td> <td>中國XX省XX市XX縣</td> <td>中國XX省XX市XX縣</td> <td>中國XX省XX市XX縣</td> </tr> </tbody> </table> </body> </html>
.table樣式的主要作用有3個：增加單元格的內邊距，在thead的底部設定一條2畫素的粗線，以及每行記錄的頂部都有一條一個1畫素的細線。主要原始碼如下：
.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; //每條記錄的頂部都有一條1畫素的細線
}
.table > thead > tr > th {
vertical-align: bottom;
border-bottom: 2px solid #ddd; //thead有1條2畫素寬的橫線
}
.table > tbody + tbody {
border-top: 2px solid #ddd; //如果表格有2個tbody，兩者指間會有1條2畫素寬的橫線
}在.table的基礎上，通過 .table-striped 類可以給 <tbody> 之內的每一行增加斑馬條紋樣式。使用方法如下：
<table class="table table-striped">
...
</table><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="css/bootstrap.css" type="text/css" rel="stylesheet">
<title>Table</title>
</head>
<body>
<table class="table table-striped">
<tbody>
<tr>
<th>姓名</th>
<th>畢業學校</th>
<th>聯絡方式</th>
<th>地址</th>
</tr>
<tr>
<td>張三</td>
<td>李四</td>
<td>王五</td>
<td>陳六</td>
</tr>
<tr>
<td>清華大學</td>
<td>北京大學</td>
<td>浙江大學</td>
<td>廈門大學</td>
</tr>
<tr>
<td>13122222222</td>
<td>13233333333</td>
<td>15644444444</td>
<td>17866666666</td>
</tr>
<tr>
<td>中國XX省XX市XX縣</td>
<td>中國XX省XX市XX縣</td>
<td>中國XX省XX市XX縣</td>
<td>中國XX省XX市XX縣</td>
</tr>
</tbody>
</table>
</body>
</html> 
隔行換色的原理是利用了css3中的:nth-of-type選擇器來實現的，不支援IE8及以下版本。原始碼如下：.table-striped > tbody > tr:nth-of-type(odd) {
background-color: #f9f9f9;
}- :nth-of-type(n) 選擇器匹配屬於父元素的特定型別的第 N 個子元素的每個元素。n 可以是數字、關鍵詞或公式。
- :nth-child() 選擇器，該選擇器選取父元素的第 N 個子元素，與型別無關。
3、帶邊框的表格
在基礎樣式下，Bootstrap為表格所有的單元格提供了1條1畫素的邊框。使用方式如下：
<table class="table table-bordered">
...
</table><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="css/bootstrap.css" type="text/css" rel="stylesheet">
<title>Table</title>
</head>
<body>
<table class="table table-bordered">
<tbody>
<tr>
<th>姓名</th>
<th>畢業學校</th>
<th>聯絡方式</th>
<th>地址</th>
</tr>
<tr>
<td>張三</td>
<td>李四</td>
<td>王五</td>
<td>陳六</td>
</tr>
<tr>
<td>清華大學</td>
<td>北京大學</td>
<td>浙江大學</td>
<td>廈門大學</td>
</tr>
<tr>
<td>13122222222</td>
<td>13233333333</td>
<td>15644444444</td>
<td>17866666666</td>
</tr>
<tr>
<td>中國XX省XX市XX縣</td>
<td>中國XX省XX市XX縣</td>
<td>中國XX省XX市XX縣</td>
<td>中國XX省XX市XX縣</td>
</tr>
</tbody>
</table>
</body>
</html>
實現原始碼如下：.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 class="table table-condensed">
...
</table>
預設情況下表格的padding是8畫素，緊湊型的表格的padding是5畫素。原始碼如下：
.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為表格也提供了一個響應式設計的容器（.table-responsive樣式），在table的基礎上，新增這個table-responsive即可建立響應式表格，其會在小螢幕裝置上（小於768px）水平滾動，而當螢幕大於768px時，水平滾動條消失。示例如下:
<div class="table-responsive">
<table class="table">
...
</table>
</div><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="css/bootstrap.css" type="text/css" rel="stylesheet">
<title>Table</title>
</head>
<body>
<div class="table-responsive">
<table class="table table-condensed ">
<tbody>
<tr>
<th>姓名</th>
<th>畢業學校</th>
<th>聯絡方式</th>
<th>地址</th>
</tr>
<tr>
<td>張三</td>
<td>李四</td>
<td>王五</td>
<td>陳六</td>
</tr>
<tr>
<td>清華大學</td>
<td>北京大學</td>
<td>浙江大學</td>
<td>廈門大學</td>
</tr>
<tr>
<td>13122222222</td>
<td>13233333333</td>
<td>15644444444</td>
<td>17866666666</td>
</tr>
<tr>
<td>中國XX省XX市XX縣</td>
<td>中國XX省XX市XX縣</td>
<td>中國XX省XX市XX縣</td>
<td>中國XX省XX市XX縣</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
響應式表格的實現原理是利用了CSS的媒體查詢特性，小於768px的裝置上應用自己設計的樣式，該樣式主要有3個方面的設定：
1）對.table-responsive容器邊框以及滾動條進行了設定；
2）把原有.table樣式的底部外邊距margin-bottom從20px變成了0px，其目的是消除滾動條帶來的上下高度差，並在.table-responsive樣式上設定了一個margin-bottom:15px;以避免和容器外部的下一個元素重疊；
3）將所有單元格的文字設定成不自動換行，以保留原有樣式。
原始碼如下：
@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;//將整個表格的外邊框設定為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;
}