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

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

問題如下

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

問題分析

①我首先想通過樣式來讓表體內容根據內容大小自動適應寬度，根據內容改變寬度，最后得到效果如下

.layui-table-cell {

width: auto;

}

🐟得到的結果，表格的單元格根據表格的內容撐大了，同時也導致了表頭和表體不對齊了，因為表格框架都是表頭和表體采用的是兩個表格來做的，所以就會出現這樣情況。

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

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

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

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

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

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

情況二：超出一屏幕

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

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

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

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

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

.layui-table-cell {

height: auto ;

white-space: normal;

}

🐖自適應其實要把內容顯示全，但可能想要的效果是寬度上自適應，(由于)在高度上做調整就會讓表格的高度不統一，并且一頁的數據量也就受到影響。

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。