本文將為您描述layui表格字段表格顯示不全(自適應(yīng)),具體操作方法:

好記性不如爛筆頭。本來就是沒什么好記得東西，下次再用時已經(jīng)想不起來了。

問題如下

🐟使用layui表格，表格字段顯示不全，如果超出分配的位置，就會顯示省略號(如上圖)，當(dāng)鼠標(biāo)放上是可以展開查看全部內(nèi)容。對于備注等不重要字段這確實是一個不錯的方式，但是對于一些單號狀態(tài)，顯示不全就會讓人很難受。

問題分析

①我首先想通過樣式來讓表體內(nèi)容根據(jù)內(nèi)容大小自動適應(yīng)寬度，根據(jù)內(nèi)容改變寬度，最后得到效果如下

.layui-table-cell {

width: auto;

}

🐟得到的結(jié)果，表格的單元格根據(jù)表格的內(nèi)容撐大了，同時也導(dǎo)致了表頭和表體不對齊了，因為表格框架都是表頭和表體采用的是兩個表格來做的，所以就會出現(xiàn)這樣情況。

😚為什么表頭與表體要用兩個表格來做呢？

來自閃存回答：為了實現(xiàn)復(fù)雜多級表頭(所以也就是很多表格框架可能出現(xiàn)表頭與表體對不上的原因)

🐟所以我們該如何讓表頭和表體對齊呢？

讓表頭和表體使用同一種模式去計算寬度。也就是定義好寬度，在生成表格的時候都使用這個寬度。

layui做法情況一：字段比較少未超出屏幕時

為了顯示美觀，這種情況下一般會根據(jù)屏幕大小平分到每個單元格上

情況二：超出一屏幕

這是layui字段中可以定義寬度，如果沒有定義寬度系統(tǒng)layui有一個默認(rèn)顯示寬度，超出部分也就是如上顯示格式。

②bootstrap table 好像可以自適應(yīng) (實際上并不是我想要的效果)

🌂如何讓layui table 顯示成bootstrap table 的方式

/*layui table 可以設(shè)置表格的大小如sm，根據(jù)不同大小會定義表格行高度，一行顯示，超出就顯示省略號

無法改變寬度，就改變他的高度，并且設(shè)置換行*/

.layui-table-cell {

height: auto ;

white-space: normal;

}

🐖自適應(yīng)其實要把內(nèi)容顯示全，但可能想要的效果是寬度上自適應(yīng)，(由于)在高度上做調(diào)整就會讓表格的高度不統(tǒng)一，并且一頁的數(shù)據(jù)量也就受到影響。

其實layui是可以把固定寬度設(shè)置大一些，但不同電腦的顯示的效果可能是不同的。

layui表格字段表格顯示不全(自適應(yīng))就為您介紹到這里，感謝您關(guān)注懶咪學(xué)編程c.lanmit.com.

本文地址：https://c.lanmit.com/Webqianduan/htmlyucss/57424.html

總結(jié)

以上是生活随笔為你收集整理的oracle 数据库字段html显示正常text显示不全,layui表格字段表格显示不全（自适应）...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。