BootStrap 標題設置跨行無效的解決方法

2024-05-06 15:46:16

字體：大中小

來源：轉載

供稿：網友

BootStrap 標題設置跨行無效的解決方法大家都知道嗎？BootStrap 標題設置跨行無效方便預覽，不需要根據數據的變化而變化，本文是錯新技術頻道小編和大家分享的知識，希望能幫助到大家。

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>

效果如下：

可以看到圖上效果，“功能分類”這個單元格屬性設置了colspan="2" rowspan="2"，但是只有colspan="2"起了效果。

解決方案：

不要將需要跨行的單元格放在<thead>標簽中，可以如下設置：

<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>

效果如下：