在实际开发中，我们通过菜鸟教程复制的表格往往不能满足我们的开发需求，样式很难看，而且不能自适应，尤其是需要到处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 id="cardetail" 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" id="number" name="user[number]">123456996</td> 39 </tr> 40 </tbody> 41 <tbody id="car"> 42 <tr class="table-user"> 43 <td colspan="26">主车信息</td> 44 </tr> 45 <tr class="table-list"> 46 <td>车牌号：</td> 47 <td id="hcardNum">鲁JK345</td> 48 <td>大架号：</td> 49 <td id="hcard" colspan="4">LA9940Zc506FDSS218</td> 50 <td colspan="2">车辆类型：</td> 51 <td id="hcardType" colspan="12">重型货车</td> 52 </tr> 53 <tr class="table-list"> 54 <td>发动机型号：</td> 55 <td id="hcardNum">鲁JK345</td> 56 <td class="tableName" >注册日期：</td> 57 <td id="hcard" colspan="4">2016-06-26</td> 58 <td class="tableName" colspan="2">厂牌型号</td> 59 <td id="hcardType" colspan="12">东风天龙</td> 60 </tr> 61 <tr class="table-list"> 62 <td class="tableName">行驶证到期日期：</td> 63 <td id="hcardNum" colspan="2">2016-05-30</td> 64 <td class="tableName" >运营证到期日期：</td> 65 <td id="hcard" colspan="4">2016-08-30</td> 66 <td class="tableName" colspan="2">车辆状态：</td> 67 <td id="hcardType" colspan="12">正常</td> 68 </tr> 69 <tr class="table-list"> 70 <td>挂靠详情：</td> 71 <td id="hcardNum">挂靠费</td> 72 <td>150</td> 73 <td id="hcard">审运营费</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 id="hcardNum">2016-09-30</td> 89 <td class="tableName">收费日期</td> 90 <td id="hcard" colspan="3">2016-06-30</td> 91 <td class="tableName" colspan="2">挂靠备注</td> 92 <td id="hcardType" colspan="7">********</td> 93 </tr> 94 <tr class="table-list"> 95 <td class="tableName">主车备注：</td> 96 <td id="hcardNum" colspan="26">鲁JK345</td> 97 </tr> 98 <tr class="table-list"> 99 <td class="tableName">商险详情：</td> 100 <td id="hcardNum">投保日期</td> 101 <td class="tableName" colspan="2">2016-06-30至2016-09-30</td> 102 <td id="hcard" colspan="1">金额</td> 103 <td class="tableName" colspan="1">3000</td> 104 <td id="hcardType" colspan="1">保险公司</td> 105 <td id="hcardType" colspan="2">人保</td> 106 <td id="hcardType" colspan="2">代理人</td> 107 <td id="hcardType" colspan="6">张三丰</td> 108 </tr> 109 <tr class="table-list"> 110 <td class="tableName">商险种类：</td> 111 <td id="hcardNum">三者险 </td> 112 <td>200</td> 113 <td id="hcard" >车损险 </td> 114 <td colspan="2">400</td> 115 <td id="hcardType">驾驶员险 </td> 116 <td id="hcardType" colspan="2">500</td> 117 <td id="hcardType">乘客险 </td> 118 <td id="hcardType" colspan="3">300</td> 119 <td id="hcardType">不计免赔险 </td> 120 <td id="hcardType" colspan="4">500</td> 121 </tr> 122 <tr class="table-list"> 123 <td class="tableName">强险详情：</td> 124 <td id="hcardNum">投保日期：</td> 125 <td class="tableName" colspan="2">2016-09-30至2015-06-30</td> 126 <td id="hcard">金额</td> 127 <td class="tableName" colspan="1">1300</td> 128 <td id="hcardType" colspan="1">保险公司</td> 129 <td id="hcardType" colspan="2">人保</td> 130 <td id="hcardType" colspan="2"> 代理人</td> 131 <td id="hcardType" colspan="6">上官飞燕</td> 132 </tr> 133 <tr class="table-list"> 134 <td class="tableName">保险备注：</td> 135 <td id="hcardNum" colspan="24">鲁JK345132132123123132</td> 136 </tr> 137 </tbody> 138 <tbody id="guacar"> 139 <tr class="table-user"> 140 <td colspan="26">挂车信息</td> 141 </tr> 142 <tr class="table-list"> 143 <td>车牌号：</td> 144 <td id="hcardNum">鲁JK345</td> 145 <td>大架号：</td> 146 <td id="hcard" colspan="4">LA9940Zc506FDSS218</td> 147 <td colspan="2">车辆类型：</td> 148 <td id="hcardType" colspan="12">重型货车</td> 149 </tr> 150 <tr class="table-list"> 151 <td>发动机型号：</td> 152 <td id="hcardNum">鲁JK345</td> 153 <td class="tableName" colspan="2">注册日期：</td> 154 <td id="hcard" colspan="3">2016-06-26</td> 155 <td class="tableName" colspan="2">厂牌型号</td> 156 <td id="hcardType" colspan="12">东风天龙</td> 157 </tr> 158 <tr class="table-list"> 159 <td class="tableName" colspan="2">行驶证到期日期：</td> 160 <td id="hcardNum" colspan="2">2016-05-30</td> 161 <td class="tableName" colspan="3">运营证到期日期：</td> 162 <td id="hcard" colspan="3">2016-08-30</td> 163 <td class="tableName" colspan="2">车辆状态：</td> 164 <td id="hcardType" colspan="8">正常</td> 165 </tr> 166 <tr class="table-list"> 167 <td>挂靠详情：</td> 168 <td id="hcardNum">挂靠费</td> 169 <td>150</td> 170 <td id="hcard">审运营费</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 id="hcardNum" colspan="3">2016-09-30</td> 186 <td class="tableName" colspan="2">收费日期</td> 187 <td id="hcard" colspan="3">2016-06-30</td> 188 <td class="tableName" colspan="2">挂靠备注</td> 189 <td id="hcardType" colspan="6">********</td> 190 </tr> 191 <tr class="table-list"> 192 <td class="tableName">主车备注：</td> 193 <td id="hcardNum" colspan="26">鲁JK345</td> 194 </tr> 195 <tr class="table-list"> 196 <td class="tableName">商险详情：</td> 197 <td id="hcardNum">投保日期</td> 198 <td class="tableName" colspan="2">2016-06-30至2016-09-30</td> 199 <td id="hcard" colspan="1">金额</td> 200 <td class="tableName" colspan="1">3000</td> 201 <td id="hcardType" colspan="1">保险公司</td> 202 <td id="hcardType" colspan="2">人保</td> 203 <td id="hcardType" colspan="2">代理人</td> 204 <td id="hcardType" colspan="6">张三丰</td> 205 </tr> 206 <tr class="table-list"> 207 <td class="tableName">商险种类：</td> 208 <td id="hcardNum">三者险 </td> 209 <td>200</td> 210 <td id="hcard" >车损险 </td> 211 <td colspan="2">400</td> 212 <td id="hcardType" colspan="2">驾驶员险 </td> 213 <td id="hcardType" colspan="2">500</td> 214 <td id="hcardType" colspan="2">乘客险 </td> 215 <td id="hcardType" >300</td> 216 <td id="hcardType">不计免赔险 </td> 217 <td id="hcardType" colspan="4">500</td> 218 </tr> 219 <tr class="table-list"> 220 <td class="tableName">强险详情：</td> 221 <td id="hcardNum">投保日期：</td> 222 <td class="tableName" colspan="2">2016-09-30至2015-06-30</td> 223 <td id="hcard">金额</td> 224 <td class="tableName" colspan="1">1300</td> 225 <td id="hcardType" colspan="1">保险公司</td> 226 <td id="hcardType" colspan="2">人保</td> 227 <td id="hcardType" colspan="2"> 代理人</td> 228 <td id="hcardType" colspan="6">上官飞燕</td> 229 </tr> 230 <tr class="table-list"> 231 <td class="tableName">保险备注：</td> 232 <td id="hcardNum" colspan="24">鲁JK345132132123123132</td> 233 </tr> 234 </tbody> 235 <tbody id="car"> 236 <tr class="table-user"> 237 <td colspan="26">车主信息</td> 238 </tr> 239 <tr class="table-list"> 240 <td>姓名：</td> 241 <td id="hcardNum">张三丰</td> 242 <td>电话：</td> 243 <td id="hcard" colspan="2">187****6129</td> 244 <td colspan="2">备用电话</td> 245 <td id="hcardType" colspan="3">157****6629</td> 246 <td colspan="3">区域</td> 247 <td id="hcardType" colspan="3">济南</td> 248 </tr> 249 <tr class="table-list"> 250 <td class="tableName">身份证号码</td> 251 <td id="hcardNum" colspan="3">6228211994........</td> 252 <td colspan="2">地址</td> 253 <td id="hcard" colspan="10">山东省济南市历城区外滩南区12单元1801</td> 254 </tr> 255 <tr class="table-list"> 256 <td>驾驶员：</td> 257 <td id="hcardNum" colspan="2">张三丰</td> 258 <td colspan="2">驾驶证号：</td> 259 <td id="hcard" 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 id="hcardNum" 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,但是这个好像也不是太好，不知道大家是怎么去处理的。