技術標籤：layui中table監聽單元格

工作中遇到的自適應表格，實現過程並不順暢，花費了一些功夫。將其中不熟悉的技術點總結如下，期待下次可以行雲流水的做出來。

1、自適應表格如何實現文字溢位點點的效果

自適應的表格，由於單元格的流動性，文字不存在溢位這樣情況，如下圖所示：

如何解決自適應表格內容過多將佈局撐亂的情況？

給table標籤加如下css宣告：

table-layout: fixed;

table-layout作用就是讓表格佈局固定，使表格的寬度不會根據內容多少而動態變化。 設定了 table-layout：fixed後的效果：

2、td不用設定height

單元格內容太多，會出現內容折行限制，將td撐高，所有設定 height 沒有意義。

如何設定td的初始高度

設定 td 初始高度最好用 padding 進行設定，考慮到了單元格被撐開的情況。 可如下設定：

.table td, .table th {
    padding: 5px 10px;
}

3、表格的邊框問題

給th、td都設定了border後會出現如下情形：

如何讓表格的邊框重疊

給table設定如下css：

table {
    border-collapse: collapse;
    border-spacing: 0;
}

border-collapse：可以讓單元格的之間共享邊框 border-spacing：消除單元格之間的間距