ホームページ > ウェブフロントエンド > htmlチュートリアル > テーブル レイアウト ---- ブートストラップ スタイルのレイアウトに基づく

テーブル レイアウト ---- ブートストラップ スタイルのレイアウトに基づく

巴扎黑
リリース: 2017-06-27 09:27:27
オリジナル
1427 人が閲覧しました

実際の開発では、初心者向けのチュートリアルでコピーしたテーブルは、多くの場合、スタイルが醜く、適応性がありません。特に、今回はフォームを作成しました。マスターは欠点についてアドバイスをくれます。

コードは次のとおりです:

 <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>
ログイン後にコピー

ここでは主に Colspan が使用されていますが、これはあまり良くないようです。誰もがそれを処理します。

以上がテーブル レイアウト ---- ブートストラップ スタイルのレイアウトに基づくの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート