Heim > Artikel > Web-Frontend > Tabellenlayout ----basierend auf dem Layout im Bootstrap-Stil
Tabellenlayout ----basierend auf dem Layout im Bootstrap-Stil
- 巴扎黑Original
- 2017-06-27 09:27:271394Durchsuche
In der tatsächlichen Entwicklung können die Tabellen, die wir durch Tutorials für Anfänger kopiert haben, unsere Entwicklungsanforderungen oft nicht erfüllen. Die Stile sind hässlich und können nicht angepasst werden, insbesondere die Stile, die überall Excel erfordern. Deshalb habe ich es dieses Mal geschrieben Formular, ich hoffe, die Experten können mir einige Ratschläge zu seinen Mängeln geben;
Der Code lautet wie folgt:
<html>
<head></head>
<body class="body-white">
1 2 3 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?1.1.11" /> 9
<link rel="stylesheet" href="style.css?1.1.11" /> 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 30 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?1.1.11"></script>272
<script src="js/xlsx.core.min.js?1.1.11"></script>273
<script src="js/blob.js?1.1.11"></script>274
<script src="js/FileSaver.min.js?1.1.11"></script>275
<script src="js/tableexport.js?1.1.11"></script>276
<script>277 $(function(){278 $("table").tableExport({formats:["xlsx","xls","csv","txt"]});279 })280 </script>281 282
</body>
</html>
Hier wird hauptsächlich Colspan verwendet, aber das scheint nicht sehr gut zu sein. Ich weiß nicht, wie jeder damit umgeht.
Das obige ist der detaillierte Inhalt vonTabellenlayout ----basierend auf dem Layout im Bootstrap-Stil. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn