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