好記性不如爛筆頭，本來就是沒什么好記得東西，下次再用時已經想不起來了，
-
問題如下
??使用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是可以把固定寬度設定大一些，但不同電腦的顯示的效果可能是不同的，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/31369.html
標籤：Html/Css
下一篇：5.Utilities：工具