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>
以下是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 }