這篇文章主要介紹了layui表格支不支持自適應，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)公司是一家專業(yè)的成都網(wǎng)站建設公司，我們專注網(wǎng)站設計、成都做網(wǎng)站、網(wǎng)絡營銷、企業(yè)網(wǎng)站建設，買友情鏈接，一元廣告為企業(yè)客戶提供一站式建站解決方案，能帶給客戶新的互聯(lián)網(wǎng)理念。從網(wǎng)站結構的規(guī)劃UI設計到用戶體驗提高，創(chuàng)新互聯(lián)力求做到盡善盡美。

layui表格不支持自適應。比如在頁面中添加數(shù)據(jù)表格時，會發(fā)現(xiàn)數(shù)據(jù)表格每列寬度的大小不能自適應表格，都擠在了一起，看了官方文檔后發(fā)現(xiàn)，可以為表格設置列寬：

layuiTable.render({width: 710,elem: '#tabSta',url: "/pickTicket/tytr", cols: [[{ field: "ShiftsID", title: "班次ID", hide: true },{ field: "scheduleCoding", title: "班次", align: "center" },{ field: "time", title: "時間", align: "center" },{ field: "carNumber", title: "車輛編號", align: "center" } ]],});

但是，問題由來了。當我縮小頁面時，表格的寬度還是原來的寬度，不能達到自適應大小的要求。原因在于我剛才給它設置的寬度是固定大小的寬度。

既然上面這個方法不行，那進行第二種解決方法。我在瀏覽器頁面檢查發(fā)現(xiàn)，當將寬度設置為100%時，數(shù)據(jù)表格的寬度就能進行自適應大小了。所以，在數(shù)據(jù)表格的對應代碼中給它加上參數(shù)done，給數(shù)據(jù)表格自定義一個樣式。

相關代碼如下：

tabrecord =layuiTable.render({elem: ‘#tabStation’,url: “/pickTicket/tytr”,done: function (res, curr, count){KaTeX parse error: Expected 'EOF', got '}' at position 34: …th", "100%"); }?, cols: [[ { fi…(“table”).css(“width”, “100%”);

也可以這樣寫$(“table”).width(“100%”)。

通過這樣設置，我們回到瀏覽器頁面進行查看，無論我們怎樣縮放頁面，數(shù)據(jù)表格都能自行適應頁面大小。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“l(fā)ayui表格支不支持自適應”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設公司，，關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關知識等著你來學習!

文章題目：layui表格支不支持自適應-創(chuàng)新互聯(lián)
鏈接分享：http://weahome.cn/article/djohii.html