在實際開發中，我們通過菜鳥教程復制的表格往往不能滿足我們的開發需求，樣式很難看，而且不能自適應，尤其是需要到處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,但是這個好像也不是太好，不知道大家是怎么去處理的。