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>
