1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>基础表格</title> 6 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 7 </head> 8 9 <body> 10 <h1>基础表格</h1> 11 <table class="table"> 12 <thead> 13 <tr> 14 <th>表格标题</th> 15 <th>表格标题</th> 16 <th>表格标题</th> 17 </tr> 18 </thead> 19 <tbody> 20 <tr> 21 <td>表格单元格</td> 22 <td>表格单元格</td> 23 <td>表格单元格</td> 24 </tr> 25 <tr> 26 <td>表格单元格</td> 27 <td>表格单元格</td> 28 <td>表格单元格</td> 29 </tr> 30 </tbody> 31 </table> 32 <h1>斑马线表格</h1> 33 <table class="table table-striped"> 34 <thead> 35 <tr> 36 <th>表格标题</th> 37 <th>表格标题</th> 38 <th>表格标题</th> 39 </tr> 40 </thead> 41 <tbody> 42 <tr> 43 <td>表格单元格</td> 44 <td>表格单元格</td> 45 <td>表格单元格</td> 46 </tr> 47 <tr> 48 <td>表格单元格</td> 49 <td>表格单元格</td> 50 <td>表格单元格</td> 51 </tr> 52 <tr> 53 <td>表格单元格</td> 54 <td>表格单元格</td> 55 <td>表格单元格</td> 56 </tr> 57 <tr> 58 <td>表格单元格</td> 59 <td>表格单元格</td> 60 <td>表格单元格</td> 61 </tr> 62 </tbody> 63 </table> 64 <h1>带边框的表格</h1> 65 <table class="table table-bordered"> 66 <thead> 67 <tr> 68 <th>表格标题</th> 69 <th>表格标题</th> 70 <th>表格标题</th> 71 </tr> 72 </thead> 73 <tbody> 74 <tr> 75 <td>表格单元格</td> 76 <td>表格单元格</td> 77 <td>表格单元格</td> 78 </tr> 79 <tr> 80 <td>表格单元格</td> 81 <td>表格单元格</td> 82 <td>表格单元格</td> 83 </tr> 84 <tr> 85 <td>表格单元格</td> 86 <td>表格单元格</td> 87 <td>表格单元格</td> 88 </tr> 89 <tr> 90 <td>表格单元格</td> 91 <td>表格单元格</td> 92 <td>表格单元格</td> 93 </tr> 94 </tbody> 95 </table> 96 <h1>鼠标悬浮高亮的表格</h1> 97 <table class="table table-striped table-bordered table-hover"> 98 <thead> 99 <tr> 100 <th>表格标题</th> 101 <th>表格标题</th> 102 <th>表格标题</th> 103 </tr> 104 </thead> 105 <tbody> 106 <tr> 107 <td>表格单元格</td> 108 <td>表格单元格</td> 109 <td>表格单元格</td> 110 </tr> 111 <tr> 112 <td>表格单元格</td> 113 <td>表格单元格</td> 114 <td>表格单元格</td> 115 </tr> 116 <tr> 117 <td>表格单元格</td> 118 <td>表格单元格</td> 119 <td>表格单元格</td> 120 </tr> 121 <tr> 122 <td>表格单元格</td> 123 <td>表格单元格</td> 124 <td>表格单元格</td> 125 </tr> 126 </tbody> 127 </table> 128 <h1>紧凑型表格</h1> 129 <table class="table table-condensed"> 130 <thead> 131 <tr> 132 <th>表格标题</th> 133 <th>表格标题</th> 134 <th>表格标题</th> 135 </tr> 136 </thead> 137 <tbody> 138 <tr> 139 <td>表格单元格</td> 140 <td>表格单元格</td> 141 <td>表格单元格</td> 142 </tr> 143 <tr> 144 <td>表格单元格</td> 145 <td>表格单元格</td> 146 <td>表格单元格</td> 147 </tr> 148 <tr> 149 <td>表格单元格</td> 150 <td>表格单元格</td> 151 <td>表格单元格</td> 152 </tr> 153 <tr> 154 <td>表格单元格</td> 155 <td>表格单元格</td> 156 <td>表格单元格</td> 157 </tr> 158 </tbody> 159 </table> 160 <h1>响应式表格</h1> 161 <div class="table-responsive"> 162 <table class="table table-bordered"> 163 <thead> 164 <tr> 165 <th>表格标题</th> 166 <th>表格标题</th> 167 <th>表格标题</th> 168 </tr> 169 </thead> 170 <tbody> 171 <tr> 172 <td>表格单元格</td> 173 <td>表格单元格</td> 174 <td>表格单元格</td> 175 </tr> 176 <tr> 177 <td>表格单元格</td> 178 <td>表格单元格</td> 179 <td>表格单元格</td> 180 </tr> 181 <tr> 182 <td>表格单元格</td> 183 <td>表格单元格</td> 184 <td>表格单元格</td> 185 </tr> 186 <tr> 187 <td>表格单元格</td> 188 <td>表格单元格</td> 189 <td>表格单元格</td> 190 </tr> 191 </tbody> 192 </table> 193 </div> 194 </body> 195 </html>
