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

來源：懂視網責編：小采時間：2020-11-27 22:27:11

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

BootStrap 標題設置跨行無效的解決方法:最近在使用BootStrap的表格做一個報表界面（不需要報表的功能，只需要預覽并且行列定好無需根據數據量變化，如有更好的框架歡迎推薦。），發現標題設置跨行屬性rowspan無效。html如下： <table class=table table-bordered> &

推薦度：

點擊下載本文 文檔為doc格式

導讀BootStrap 標題設置跨行無效的解決方法:最近在使用BootStrap的表格做一個報表界面（不需要報表的功能，只需要預覽并且行列定好無需根據數據量變化，如有更好的框架歡迎推薦。），發現標題設置跨行屬性rowspan無效。html如下： <table class=table table-bordered> &

最近在使用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>

效果如下：

可以看到圖上效果，“功能分類”這個單元格屬性設置了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>

效果如下：