欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

基于Bootstraptable組件如何實現多層表頭-創(chuàng)新互聯

這篇文章主要為大家展示了“基于Bootstrap table組件如何實現多層表頭”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“基于Bootstrap table組件如何實現多層表頭”這篇文章吧。

成都創(chuàng)新互聯主要從事成都做網站、網站設計、網頁設計、企業(yè)做網站、公司建網站等業(yè)務。立足成都服務連云,10余年網站建設經驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:18980820575

0.效果圖

基于Bootstrap table組件如何實現多層表頭

1.實現方法

<html>
<head>
<title>多層表頭</title>
<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" 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 href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" 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”對應的第二層表頭就不需要指定了。

第三步，啟用bootstrap-table。

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

以上是“基于Bootstrap table組件如何實現多層表頭”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯成都網站設計公司行業(yè)資訊頻道！

另外有需要云服務器可以了解下創(chuàng)新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網頁標題：基于Bootstraptable組件如何實現多層表頭-創(chuàng)新互聯
文章來源：http://www.chinadenli.net/article22/pohjc.html

成都網站建設公司_創(chuàng)新互聯，為您提供服務器托管、營銷型網站建設、ChatGPT、移動網站建設、手機網站建設、用戶體驗

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯

網站建設網站維護公司