Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > Table layout----based on bootstrap style layout

Table layout----based on bootstrap style layout

巴扎黑
Release： 2017-06-27 09:27:27
Original
1421 people have browsed it

In actual development, the tables we copied through novice tutorials often cannot meet our development needs. The styles are ugly and cannot be adaptive, especially the styles that require Excel everywhere. It feels very bad. This time I wrote it A form, shortcomings, I hope the experts can give me some advice;

The code is as follows: 

 <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>
Copy after login

##colspan is mainly used here, But this doesn’t seem to be very good. I don’t know how everyone handles it.

The above is the detailed content of Table layout----based on bootstrap style layout. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
bootstrap based on layout sheet
source：php.cn
Previous article：Introduction to several methods to achieve horizontal and vertical centering with CSS Next article：Summary of inline elements and block-level elements in html
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
The page suddenly cannot pull css or bootstrap So I'm developing a page, I did part of it yesterday and it worked great, and today I cont...
From 2024-04-06 21:58:04
0
1
800
How to solve the mysterious white space at the bottom of the page in CSS I'm trying to build a simple webpage using Bootstrap and D3, but I don't know how to get r...
From 2024-04-06 20:22:15
0
1
454
Customize the appearance of Bootstrap accordion headers using the CollapseDisplay class I want to style the card title of a panel with class collapseshow. In this example, it's t...
From 2024-04-06 12:53:11
0
1
376
Bootstrap switch not working properly when web page is resized This is the code: <navxmlns:sec="http://www.thymeleaf.org/extras/spring-security&q...
From 2024-04-05 08:45:39
0
1
3443
Display AWS PDF files in Bootstrap mode in Laravel I have downloaded aws url like https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std_check/65...
From 2024-04-04 22:16:18
0
1
1450
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template