表格布局----基于bootstrap样式 布局
在实际开发中，我们通过菜鸟教程复制的表格往往不能满足我们的开发需求，样式很难看，而且不能自适应，尤其是需要到处Excel的样式，感觉非常糟糕，这次我就写了一个表单，不足之处，希望大神们多多指教；
代码如下：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>查询详情</title>
5 <meta name="keywords" content=""/>
6 <meta name="description" content="">
7 <meta charset="utf-8">
8 <link rel="stylesheet" href="bootstrap.min.css">
9 <link rel="stylesheet" href="style.css">
10 <style>
11 #cardetail{
12 color:#fff;
13 font-size:16px;
14 }
15 .table-header{
16 height: 66px;
17 font-size: 22px;
18 background:rgba(224,226,230,.8);
19 }
20 .table-user{
21 height: 60px;
22 font-size: 20px;
23 }
24
25 .table-list{
26 height:35px;
27 }
28 </style>
29 </head>
30 <body class="body-white">
31 <!-- 车辆详情部分表格 -->
32 <div class="wrapper">
33 <div class="table-responsive">
34 <table class="table table-bordered">
35 <tbody>
36 <tr class="table-header">
37 <td width="130"><i class="fa fa-pencil"></i> 档案编号: </td>
38 <td colspan="24" name="user[number]">123456996</td>
39 </tr>
40 </tbody>
41 <tbody >
42 <tr class="table-user">
43 <td colspan="26">主车信息</td>
44 </tr>
45 <tr class="table-list">
46 <td>车牌号：</td>
47 <td >鲁JK345</td>
48 <td>大架号：</td>
49 <td colspan="4">LA9940Zc506FDSS218</td>
50 <td colspan="2">车辆类型：</td>
51 <td colspan="12">重型货车</td>
52 </tr>
53 <tr class="table-list">
54 <td>发动机型号：</td>
55 <td >鲁JK345</td>
56 <td class="tableName" >注册日期：</td>
57 <td colspan="4">2016-06-26</td>
58 <td class="tableName" colspan="2">厂牌型号</td>
59 <td colspan="12">东风天龙</td>
60 </tr>
61 <tr class="table-list">
62 <td class="tableName">行驶证到期日期：</td>
63 <td colspan="2">2016-05-30</td>
64 <td class="tableName" >运营证到期日期：</td>
65 <td colspan="4">2016-08-30</td>
66 <td class="tableName" colspan="2">车辆状态：</td>
67 <td colspan="12">正常</td>
68 </tr>
69 <tr class="table-list">
70 <td>挂靠详情：</td>
71 <td >挂靠费</td>
72 <td>150</td>
73 <td >审运营费</td>
74 <td>5000</td>
75 <td>委托费</td>
76 <td>3000</td>
77 <td>安全会议费</td>
78 <td>300</td>
79 <td>GPS费</td>
80 <td>600</td>
81 <td>其他</td>
82 <td>500</td>
83 <td>共计</td>
84 <td>60000</td>
85 </tr>
86 <tr class="table-list">
87 <td class="tableName">挂靠日期：</td>
88 <td >2016-09-30</td>
89 <td class="tableName">收费日期</td>
90 <td colspan="3">2016-06-30</td>
91 <td class="tableName" colspan="2">挂靠备注</td>
92 <td colspan="7">********</td>
93 </tr>
94 <tr class="table-list">
95 <td class="tableName">主车备注：</td>
96 <td colspan="26">鲁JK345</td>
97 </tr>
98 <tr class="table-list">
99 <td class="tableName">商险详情：</td>
100 <td >投保日期</td>
101 <td class="tableName" colspan="2">2016-06-30至2016-09-30</td>
102 <td colspan="1">金额</td>
103 <td class="tableName" colspan="1">3000</td>
104 <td colspan="1">保险公司</td>
105 <td colspan="2">人保</td>
106 <td colspan="2">代理人</td>
107 <td colspan="6">张三丰</td>
108 </tr>
109 <tr class="table-list">
110 <td class="tableName">商险种类：</td>
111 <td >三者险 </td>
112 <td>200</td>
113 <td >车损险 </td>
114 <td colspan="2">400</td>
115 <td >驾驶员险 </td>
116 <td colspan="2">500</td>
117 <td >乘客险 </td>
118 <td colspan="3">300</td>
119 <td >不计免赔险 </td>
120 <td colspan="4">500</td>
121 </tr>
122 <tr class="table-list">
123 <td class="tableName">强险详情：</td>
124 <td >投保日期：</td>
125 <td class="tableName" colspan="2">2016-09-30至2015-06-30</td>
126 <td >金额</td>
127 <td class="tableName" colspan="1">1300</td>
128 <td colspan="1">保险公司</td>
129 <td colspan="2">人保</td>
130 <td colspan="2"> 代理人</td>
131 <td colspan="6">上官飞燕</td>
132 </tr>
133 <tr class="table-list">
134 <td class="tableName">保险备注：</td>
135 <td colspan="24">鲁JK345132132123123132</td>
136 </tr>
137 </tbody>
138 <tbody >
139 <tr class="table-user">
140 <td colspan="26">挂车信息</td>
141 </tr>
142 <tr class="table-list">
143 <td>车牌号：</td>
144 <td >鲁JK345</td>
145 <td>大架号：</td>
146 <td colspan="4">LA9940Zc506FDSS218</td>
147 <td colspan="2">车辆类型：</td>
148 <td colspan="12">重型货车</td>
149 </tr>
150 <tr class="table-list">
151 <td>发动机型号：</td>
152 <td >鲁JK345</td>
153 <td class="tableName" colspan="2">注册日期：</td>
154 <td colspan="3">2016-06-26</td>
155 <td class="tableName" colspan="2">厂牌型号</td>
156 <td colspan="12">东风天龙</td>
157 </tr>
158 <tr class="table-list">
159 <td class="tableName" colspan="2">行驶证到期日期：</td>
160 <td colspan="2">2016-05-30</td>
161 <td class="tableName" colspan="3">运营证到期日期：</td>
162 <td colspan="3">2016-08-30</td>
163 <td class="tableName" colspan="2">车辆状态：</td>
164 <td colspan="8">正常</td>
165 </tr>
166 <tr class="table-list">
167 <td>挂靠详情：</td>
168 <td >挂靠费</td>
169 <td>150</td>
170 <td >审运营费</td>
171 <td>5000</td>
172 <td>委托费</td>
173 <td>3000</td>
174 <td>安全会议费</td>
175 <td>300</td>
176 <td>GPS费</td>
177 <td>600</td>
178 <td>其他</td>
179 <td>500</td>
180 <td>共计</td>
181 <td>60000</td>
182 </tr>
183 <tr class="table-list">
184 <td class="tableName">挂靠日期：</td>
185 <td colspan="3">2016-09-30</td>
186 <td class="tableName" colspan="2">收费日期</td>
187 <td colspan="3">2016-06-30</td>
188 <td class="tableName" colspan="2">挂靠备注</td>
189 <td colspan="6">********</td>
190 </tr>
191 <tr class="table-list">
192 <td class="tableName">主车备注：</td>
193 <td colspan="26">鲁JK345</td>
194 </tr>
195 <tr class="table-list">
196 <td class="tableName">商险详情：</td>
197 <td >投保日期</td>
198 <td class="tableName" colspan="2">2016-06-30至2016-09-30</td>
199 <td colspan="1">金额</td>
200 <td class="tableName" colspan="1">3000</td>
201 <td colspan="1">保险公司</td>
202 <td colspan="2">人保</td>
203 <td colspan="2">代理人</td>
204 <td colspan="6">张三丰</td>
205 </tr>
206 <tr class="table-list">
207 <td class="tableName">商险种类：</td>
208 <td >三者险 </td>
209 <td>200</td>
210 <td >车损险 </td>
211 <td colspan="2">400</td>
212 <td colspan="2">驾驶员险 </td>
213 <td colspan="2">500</td>
214 <td colspan="2">乘客险 </td>
215 <td >300</td>
216 <td >不计免赔险 </td>
217 <td colspan="4">500</td>
218 </tr>
219 <tr class="table-list">
220 <td class="tableName">强险详情：</td>
221 <td >投保日期：</td>
222 <td class="tableName" colspan="2">2016-09-30至2015-06-30</td>
223 <td >金额</td>
224 <td class="tableName" colspan="1">1300</td>
225 <td colspan="1">保险公司</td>
226 <td colspan="2">人保</td>
227 <td colspan="2"> 代理人</td>
228 <td colspan="6">上官飞燕</td>
229 </tr>
230 <tr class="table-list">
231 <td class="tableName">保险备注：</td>
232 <td colspan="24">鲁JK345132132123123132</td>
233 </tr>
234 </tbody>
235 <tbody >
236 <tr class="table-user">
237 <td colspan="26">车主信息</td>
238 </tr>
239 <tr class="table-list">
240 <td>姓名：</td>
241 <td >张三丰</td>
242 <td>电话：</td>
243 <td colspan="2">187****6129</td>
244 <td colspan="2">备用电话</td>
245 <td colspan="3">157****6629</td>
246 <td colspan="3">区域</td>
247 <td colspan="3">济南</td>
248 </tr>
249 <tr class="table-list">
250 <td class="tableName">身份证号码</td>
251 <td colspan="3">6228211994........</td>
252 <td colspan="2">地址</td>
253 <td colspan="10">山东省济南市历城区外滩南区12单元1801</td>
254 </tr>
255 <tr class="table-list">
256 <td>驾驶员：</td>
257 <td colspan="2">张三丰</td>
258 <td colspan="2">驾驶证号：</td>
259 <td colspan="5">370126198704250714</td>
260 <td colspan="2">上岗证：</td>
261 <td colspan="5">15694921333654</td>
262 </tr>
263 <tr class="table-list">
264 <td class="tableName">主车备注：</td>
265 <td colspan="26">鲁JK345</td>
266 </tr>
267 </tbody>
268 </table>
269 </div>
270 </div>
271 <script type="text/javascript" src="jquery-1.11.0.min.js"></script>
272 <script src="js/xlsx.core.min.js"></script>
273 <script src="js/blob.js"></script>
274 <script src="js/FileSaver.min.js"></script>
275 <script src="js/tableexport.js"></script>
276 <script>
277 $(function(){
278 $("table").tableExport({formats:["xlsx","xls","csv","txt"]});
279 })
280 </script>
281 </body>
282 </html>
这里主要用了colspan,但是这个好像也不是太好，不知道大家是怎么去处理的。
相关推荐
Tab控件css样式布局
<div><div><br/><br/><br/><br/><br/><br/><br/><br/><br/>…
时间：2023-11-09 04:08