首先,本項目中使用的是bootstrap框架,因此有些人會說,給表格設置自適應屬性就可以了
這里要申明的是
bootsrtap自適應是針對當瀏覽器不占滿整個屏幕,而是一半的時候才會出現(xiàn)橫向的滾動條
而當我們將瀏覽器最大化的時候,如果列數(shù)增多了呢?會出現(xiàn)什么效果
答案就是會出現(xiàn)擠壓的效果,橫向并不會出現(xiàn)滾動條
查看網(wǎng)上的教程,很多人都說將什么父div設置100%,table添加scrool屬性均不可
這里,解決的方法很簡單,設置th>標簽的屬性即可,讓其不要自動換行
$(document).ready(function() {
$("th").css("white-space","nowrap");
});
來設置頁面加載完成后th標簽不允許自動換行的屬性即可
注意在css中使用的是這個屬性,和在th標簽中使用不一樣,th標簽中使用方法如下
th nowrap="nowrap">也可實現(xiàn)不自動換行
以上就是小編為大家?guī)淼膉sp中為表格添加水平滾動條的實現(xiàn)方法全部內(nèi)容了,希望大家多多支持腳本之家~
您可能感興趣的文章:- js表格分頁實現(xiàn)代碼
- Angular.js與Bootstrap相結(jié)合實現(xiàn)表格分頁代碼
- angularjs表格分頁功能詳解
- 基于Vue.js的表格分頁組件
- 純js寫的分頁表格數(shù)據(jù)為json串
- vue.js表格分頁示例
- JS實現(xiàn)table表格數(shù)據(jù)排序功能(可支持動態(tài)數(shù)據(jù)+分頁效果)
- jsp中實現(xiàn)帶滾動條的table表格實例代碼
- javascript 帶有滾動條的表格,標題固定,帶排序功能.
- 基于JavaScript實現(xiàn)表格滾動分頁