亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

基于Bootstrap table組件實現(xiàn)多層表頭的實例代碼

 更新時間：2017年09月07日 11:57:29   作者：沉默王二  
Bootstrap table還有一個很多強大的功能，下面就通過本文給大家分享基于Bootstrap table組件實現(xiàn)多層表頭的實例代碼，需要的朋友參考下吧

在做私活的時候，有一個需求是要在頁面上實現(xiàn)多層表頭。一開始有點懵，不知道怎么來實現(xiàn)，我回想起在JFTT的時候，曾用過Flex版的多層表頭，不過那離現(xiàn)在已經(jīng)很久遠了，久遠到Flex已經(jīng)被淘汰出局了。于是在網(wǎng)上折騰了好一會兒，終于找到一款用起來簡單，效果又很不錯的組件——Bootstrap-table。

Bootstrap-table還有很多強大的功能，但這篇文章我們把關(guān)注點只放在多層表頭上，關(guān)注點確定后，這篇博客就很簡單了，但我覺得還是很有必要推而廣之——因為之前在看董卿主持的《詩詞大會》，里面有很多基礎(chǔ)的知識，竟然有很多人都答不上來，搞得我一度很“囂張”，對老婆夸下海口說我也能過第一輪，但事實是我過不了——我也不會寫“碧玉妝成一樹高，萬條垂下綠絲絳（tao）”中的tao字。

所以，文章不在于其難度，而在于其意義——在月球上邁上一小步和在地球上邁上一小步差別就在于“這是個人邁出的一小步，但卻是人類邁出的一大步。”

0.效果圖

1.實現(xiàn)方法

<html>
<head>
<title>多層表頭</title>
<link  rel="stylesheet">
<style type="text/css">
.table td, .table th {
 font-style: normal;
 font-weight: normal;
 text-align:center;
}
.bootstrap-table {
 width: 100%;
}
</style>
</head>
<body>
 <table data-toggle="table">
  <thead>
   <tr>
    <th data-colspan="1">妻子</th>
    <th data-colspan="2">車子</th>
    <th data-colspan="3">房子</th>
    <th data-rowspan="2">總價值</th>
   </tr>
   <tr>
    <th>唯一</th>
    <th>Mini</th>
    <th>Smart</th>
    <th>90平</th>
    <th>149平</th>
    <th>別墅</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>∞</td>
    <td>30萬</td>
    <td>20萬</td>
    <td>60萬</td>
    <td>100萬</td>
    <td>看著辦</td>
    <td>∞∞</td>
   </tr>
  </tbody>
 </table>
 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
 <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
</body>
</html>

2.具體步驟

第一步，通過CDN引入jquery和bootstrap-table。

<link  rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>

第二步，第一層表頭；

<tr>
 <th data-colspan="1">妻子</th>
 <th data-colspan="2">車子</th>
 <th data-colspan="3">房子</th>
 <th data-rowspan="2">總價值</th>
</tr>

通過data-colspan指定二級表頭橫向有多少個，縱向為1；

通過data-rowspan指定二級表頭縱向有多少個，橫向為1；

第三步，第二層表頭；

<tr>
 <th>唯一</th>
 <th>Mini</th>
 <th>Smart</th>
 <th>90平</th>
 <th>149平</th>
 <th>別墅</th>
</tr>

注意data-rowspan=”2”對應(yīng)的第二層表頭就不需要指定了。

第三步，啟用bootstrap-table。

<table data-toggle="table">
</table>

總結(jié)

以上所述是小編給大家介紹的Bootstrap table實現(xiàn)多層表頭的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評論