Bootstrap表格元素处理

Bootstrap提供了一种基础.table样式、4种附加样式以及一个支持响应式布局的.table.responsive容器样式

下面是HTML模板

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <link href="Bootstrap-distcssootstrap.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关于表格元素的处理

 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" 即可

添加背景条纹

要想给表格添加背景条纹就是在现有的.table样式基础上再应用一个table-striped样式即

HTML Usage:

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

Bootstrap Style

1 .table-striped > tbody > tr:nth-of-type(odd) {                 /*背景条纹处理,基于CSS3的nth-child选择器实现，这里选择的是奇数行*/
2   background-color: #6495ED;
3 }

显示效果

添加边框

要想给表格添加边框就是在现有的.table样式基础上再应用一个table-bordered样式即可

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 }