BootStrap 標題設置跨行無效的解決方法
更新時間：2017年10月25日 10:53:37 作者：SunShine_2017
這篇文章主要介紹了BootStrap 標題設置跨行無效的解決方法,需要的朋友可以參考下
最近在使用BootStrap的表格做一個報表界面（不需要報表的功能，只需要預覽并且行列定好無需根據數據量變化，如有更好的框架歡迎推薦。），發(fā)現標題設置跨行屬性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>
效果如下：
總結
以上所述是小編給大家介紹的BootStrap 標題設置跨行無效的解決方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
這篇文章主要介紹了基于jQuery實現表格內容的篩選功能的相關資料,需要的朋友可以參考下2016-08-08
這篇文章主要介紹了jQuery中offset()方法用法,實例分析了offset()方法的功能、定義及返回或設置所匹配元素相對于document對象的偏移量時的使用技巧,需要的朋友可以參考下2015-01-01
在jquery是遍歷篩選數組有多種方法與函數了，包括有:grep、each、inArray、map同時也要以遍歷json對象哦，下面給各位同學介紹一下具體的操作方法2013-11-11
之前做項目的時候，一直都想著做一個上下滾動的公告欄，作為展示網站的最新公告信息，給用戶帶來極好的用戶體驗，下面小編通過實例代碼給大家分享基于jQuery實現上下滾動公告欄，感興趣的朋友一起看看吧2018-11-11
這篇文章主要介紹了jQuery表單域選擇器用法,實例分析了常見的表單元素選擇器的使用技巧,并給出了一個完整的實例總結,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了jQuery實現判斷上傳圖片類型和大小的方法,結合實例形式分析了jQuery針對上傳圖片屬性獲取、判定相關操作技巧,需要的朋友可以參考下2018-04-04
網頁換膚的實質就是切換CSS樣式,關鍵是給用戶做出點擊切換的功能以及換膚完成之后的緩存記錄功能,下面我們就來看一下使用jQuery實現Web頁面換膚功能的要點解析:2016-05-05
jQuery源碼分析-03構造jQuery對象-源碼結構和核心函數
jQuery源碼分析-03構造jQuery對象-源碼結構和核心函數，需要的朋友可以參考下。2011-11-11
jQuery插件FusionCharts繪制2D雙折線圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts繪制2D雙折線圖效果,結合實例形式分析了jQuery使用FusionCharts結合xml數據載入實現2D雙折線圖繪制的相關操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了jquery控制背景音樂開關與自動播放提示音的方法,實例分析了背景音樂開關的技巧與自動播放提示音的常見用法,非常具有實用價值,需要的朋友可以參考下2015-02-02