.jpg)
border-collapse 是 css 表格布局中的關(guān)鍵屬性，其值 collapse 使邊框合并、無間距，適合簡潔風(fēng)格；separate 模式下邊框獨(dú)立，可通過 border-spacing 設(shè)置間距，適合需要留白的設(shè)計(jì)。1. collapse：相鄰邊框合并，樣式優(yōu)先級(jí)影響顯示結(jié)果，常用于緊湊表格。2. separate：默認(rèn)值，邊框不合并，支持設(shè)置水平與垂直間距。3. 注意事項(xiàng)：border-spacing 僅在 separate 下有效，舊瀏覽器可能存在兼容性問題，使用時(shí)需注意測試。選擇應(yīng)根據(jù)具體設(shè)計(jì)需求決定。
在表格布局中，border-collapse 是一個(gè)很常用的 css 屬性，用來控制表格邊框的顯示方式。它有兩個(gè)主要取值：collapse 和 separate，雖然看起來只是樣式上的小調(diào)整，但在實(shí)際使用中會(huì)影響邊框合并、間距設(shè)置等關(guān)鍵表現(xiàn)。
1. border-collapse: collapse —— 邊框合并
當(dāng)你設(shè)置表格為 collapse 模式時(shí)，表格的相鄰單元格邊框會(huì)合并成一條邊框，而不是各自獨(dú)立顯示。這種模式下：
- 單元格之間的邊框不會(huì)重復(fù)繪制
- 設(shè)置邊框時(shí)需要注意“誰覆蓋誰”的問題（比如不同顏色或粗細(xì)）
- 整體看起來更緊湊，適合需要簡潔表格風(fēng)格的場景
舉個(gè)例子，如果你給兩個(gè)相鄰單元格分別設(shè)置了紅色和藍(lán)色邊框，最終顯示的是其中一條邊框，具體顏色取決于瀏覽器如何處理沖突。
立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；
table { border-collapse: collapse; } td { border: 1px solid red; }
這時(shí)候整個(gè)表格的邊框就會(huì)緊緊貼在一起，不會(huì)有額外空隙。
2. border-collapse: separate —— 邊框分離
這是默認(rèn)值。在這種模式下，每個(gè)單元格都有自己的獨(dú)立邊框，彼此之間可能會(huì)有空隙。它的特點(diǎn)包括：
- 可以通過 border-spacing 來控制單元格之間的水平和垂直間距
- 邊框不會(huì)合并，視覺上更加松散
- 更適合需要留白感的設(shè)計(jì)，比如帶邊距的表格
例如，你想要讓表格看起來不那么密集，可以這樣寫：
table { border-collapse: separate; border-spacing: 10px 5px; /* 水平間距10px，垂直間距5px */ }
這時(shí)你會(huì)發(fā)現(xiàn)單元格之間出現(xiàn)了明顯的空隙，而且邊框是各自獨(dú)立顯示的。
3. 常見誤區(qū)與注意事項(xiàng)
有時(shí)候新手會(huì)誤以為設(shè)置了 border-spacing 就能影響 collapse 模式下的表格，但其實(shí)：
- border-spacing 在 collapse 模式下完全無效
- 如果你需要控制單元格間距，必須用 separate
- 同樣地，如果你希望邊框合并得干凈利落，一定要記得顯式設(shè)置為 collapse
另外，有些舊版本瀏覽器對(duì)這兩種模式的支持略有差異，雖然現(xiàn)在基本不是問題了，但如果是兼容性要求較高的項(xiàng)目，還是建議測試一下。
基本上就這些。簡單來說，collapse 更緊湊、適合傳統(tǒng)表格風(fēng)格；而 separate 更靈活，適合需要控制間距的設(shè)計(jì)。選擇哪個(gè)取決于你的具體需求。
.png)
