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：消除單元格之間的間距