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是可以把固定寬度設置大一些，但不同電腦的顯示的效果可能是不同的。