Bootstrap表格元素處理

時間 2019-11-20

原文原文鏈接

Bootstrap提供了一種基礎.table樣式、4種附加樣式以及一個支持響應式佈局的.table.responsive容器樣式css

下面是HTML模板html

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <link href="\Bootstrap-dist\css\bootstrap.css" rel="stylesheet">
 7 </head>
 8 <body>
 9 <h1>表格處理</h1>
10 <table class="table" contenteditable="true">
11     <thead>
12     <tr>
13         <th>編號</th>
14         <th>產品</th>
15         <th>交付時間</th>
16         <th>狀態</th>
17     </tr>
18     </thead>
19     <tbody>
20     <tr>
21         <td>1</td>
22         <td>TB - Monthly</td>
23         <td>01/04/2012</td>
24         <td>Default</td>
25     </tr>
26     <tr class="success">
27         <td>1</td>
28         <td>TB - Monthly</td>
29         <td>01/04/2012</td>
30         <td>Approved</td>
31     </tr>
32     <tr class="error">
33         <td>2</td>
34         <td>TB - Monthly</td>
35         <td>02/04/2012</td>
36         <td>Declined</td>
37     </tr>
38     <tr class="warning">
39         <td>3</td>
40         <td>TB - Monthly</td>
41         <td>03/04/2012</td>
42         <td>Pending</td>
43     </tr>
44     <tr class="info">
45         <td>4</td>
46         <td>TB - Monthly</td>
47         <td>04/04/2012</td>
48         <td>Call in to confirm</td>
49     </tr>
50     </tbody>
51 </table>
52 
53 
54 </body>
55 </html>

點此展開HTML

如下是Bootstrap關於表格元素的處理bootstrap

 1 .table {                                       /*表格元素的處理*/
 2   width: 100%;
 3   max-width: 100%;
 4   margin-bottom: 20px;                     /*表格的底部添加外邊距20px，主要用於控制表格與表格和其餘元素之間距離*/
 5 }
 6 .table > thead > tr > th,                /*表頭中的th,這段代碼用的CSS子選擇符*/
 7 .table > tbody > tr > th,               /*表體中的th*/
 8 .table > tfoot > tr > th,
 9 .table > thead > tr > td,              /*表格中的一列*/
10 .table > tbody > tr > td,
11 .table > tfoot > tr > td {              /*實際上選中的是表格中的每一列*/
12   padding: 8px;                          /*設置單元格內邊距8px*/
13   line-height: 1.42857143;              /*設置表格內元素的行高*/
14   vertical-align: top;
15   border-top: 1px solid #ddd;          /*在每行的頂部添加一條 1px的細線*/
16 }
17 .table > thead > tr > th {              /*爲何不跟上面一塊兒寫了呢，由於它只想給表頭添加一條實現*/
18   vertical-align: bottom;              /*vertical垂直的意思*/
19   border-bottom: 2px solid #ddd;      /*表頭添加一條2px的橫線*/
20 }

要想應用Bootstrap提供的CSS表格樣式，只需在table元素上，添加 class="table" 便可ide

添加背景條紋

要想給表格添加背景條紋就是在現有的.table樣式基礎上再應用一個table-striped樣式即佈局

HTML Usage:spa

1 <table class="table table-striped">
2 ......
3 </table>

Bootstrap Stylecode

1 .table-striped > tbody > tr:nth-of-type(odd) {                 /*背景條紋處理,基於CSS3的nth-child選擇器實現，這裏選擇的是奇數行*/
2   background-color: #6495ED;
3 }

顯示效果htm

添加邊框blog

要想給表格添加邊框就是在現有的.table樣式基礎上再應用一個table-bordered樣式便可ip

HTML Usage:

1 1 <table class="table table-bordered">
2 2 ......
3 3 </table>

Bootstrap Style

 1 .table-bordered {                  /*表格邊框處理*/
 2   border: 1px solid #ddd;         /*總體邊框*/
 3 }
 4 .table-bordered > thead > tr > th,
 5 .table-bordered > tbody > tr > th,
 6 .table-bordered > tfoot > tr > th,
 7 .table-bordered > thead > tr > td,
 8 .table-bordered > tbody > tr > td,
 9 .table-bordered > tfoot > tr > td {   /*每列邊框添加*/
10   border: 1px solid #ddd;                  /*單元格邊框處理*/
11 }
12 .table-bordered > thead > tr > th,
13 .table-bordered > thead > tr > td {
14   border-bottom-width: 2px;              /*表頭底部處理*/
15 }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。