效果

工作中遇到的自適應(yīng)表格，實現(xiàn)過程并不順暢，花費了一些功夫。將其中不熟悉的技術(shù)點總結(jié)如下，期待下次可以行云流水的做出來。

自適應(yīng)表格如何實現(xiàn)文本溢出點點的效果

自適應(yīng)的表格，由于單元格的流動性，文字不存在溢出這樣情況，如下圖所示：

image.png

如何解決自適應(yīng)表格內(nèi)容過多將布局撐亂的情況？

給table標簽加如下css聲明：

table-layout: fixed;

table-layout作用就是讓表格布局固定，使表格的寬度不會根據(jù)內(nèi)容多少而動態(tài)變化。
設(shè)置了 table-layout：fixed后的效果：

image.png

td不用設(shè)置height

單元格內(nèi)容太多，會出現(xiàn)內(nèi)容折行限制，將td撐高，所有設(shè)置 height 沒有意義。

image.png

如何設(shè)置td的初始高度

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

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

表格的邊框問題

給th、td都設(shè)置了border后會出現(xiàn)如下情形：

image.png

如何讓表格的邊框重疊

給table設(shè)置如下css：

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

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