BootStrap標題設定跨行無效如何解決

本文主要介紹了BootStrap 標題設定跨行無效的解決方法,需要的朋友可以參考下，希望能幫助到大家。

最近在使用BootStrap的表格做一個報表介面（不需要報表的功能，只需要預覽並且行列定好無需根據數據量變化，如有更好的框架歡迎推薦。），發現標題設定跨行屬性rowspan無效。 html如下：

<table class="table table-bordered">
 <thead>
  <th colspan="2" rowspan="2">功能分类</th>
  <th>第二列</th>
  <th>第三列</th>
  <th>第四列</th>
  <th>第五列</th>
 </thead>
 <tr>
  <td>第一列</td>
  <td>第二列</td>
  <td>第三列</td>
  <td>第四列</td>
  <td>第五列</td>
 </tr>
 <tr>
  <td>第一列</td>
  <td>第二列</td>
  <td>第三列</td>
  <td>第四列</td>
  <td>第五列</td>
 </tr>
</tabel>

效果如下：

解決方案：

不要將需要跨行的儲存格放在標籤中，可以如下設定：

<table class="table table-bordered">
 <tr>
  <th colspan="2" rowspan="2">功能分类</th>
  <th>第二列</th>
  <th>第三列</th>
  <th>第四列</th>
  <th>第五列</th>
 </tr>
 <tr>
  <td>第一列</td>
  <td>第二列</td>
  <td>第三列</td>
  <td>第四列</td>
  <td>第五列</td>
 </tr>
 <tr>
  <td>第一列</td>
  <td>第二列</td>
  <td>第三列</td>
  <td>第四列</td>
  <td>第五列</td>
 </tr>
</tabel>

效果如下：

相關推薦：

bootstrap table sum總數統計如何實作

##bootstrap paginator分頁外掛程式使用方法

Bootstrap表單驗證功能詳解

以上是BootStrap標題設定跨行無效如何解決的詳細內容。更多資訊請關注PHP中文網其他相關文章！