首页 > 代码库 > 表格布局----基于bootstrap样式 布局
表格布局----基于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 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,但是这个好像也不是太好，不知道大家是怎么去处理的。
表格布局----基于bootstrap样式 布局
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。