CSS border-collapse 屬性 · W3School CSS 參考手冊

# CSS border-collapse 屬性 ## 實例為表格設置合并邊框模型： ``` table { border-collapse:collapse; } ``` ## 瀏覽器支持 | IE | Firefox | Chrome | Safari | Opera | | --- | --- | --- | --- | --- | 所有主流瀏覽器都支持 border-collapse 屬性。注釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。注釋：如果沒有規定 !DOCTYPE，則 border-collapse 可能產生意想不到的結果。 ## 定義和用法 border-collapse 屬性設置表格的邊框是否被合并為一個單一的邊框，還是象在標準的 HTML 中那樣分開顯示。 | 默認值： | separate | | --- | --- | | 繼承性： | yes | | --- | --- | | 版本： | CSS2 | | --- | --- | | JavaScript 語法： | _object_.style.borderCollapse="collapse" | | --- | --- | ## 可能的值 | 值 | 描述 | | --- | --- | | separate | 默認值。邊框會被分開。不會忽略 border-spacing 和 empty-cells 屬性。 | | collapse | 如果可能，邊框會合并為一個單一的邊框。會忽略 border-spacing 和 empty-cells 屬性。 | | inherit | 規定應該從父元素繼承 border-collapse 屬性的值。 | ## TIY 實例 [合并表格邊框](/tiy/t.asp?f=csse_table_border-collapse) 本例演示是否把表格邊框顯示為一條單獨的邊框，還是像標準的 HTML 中那樣分開顯示。 ``` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> table { border-collapse:collapse; } table, td, th { border:1px solid black; } </style> </head> <body> <table> <tr> <th>Firstname</th> <th>Lastname</th> </tr> <tr> <td>Bill</td> <td>Gates</td> </tr> <tr> <td>Steven</td> <td>Jobs</td> </tr> </table> <p><b>注釋：</b>如果沒有規定 !DOCTYPE，border-collapse 屬性可能會引起意想不到的錯誤。</p> </body> </html> ``` ## 相關頁面 CSS 教程：[CSS 表格](/css/css_table.asp "CSS 表格") HTML DOM 參考手冊：[borderCollapse 屬性](/jsref/prop_style_bordercollapse.asp "HTML DOM borderCollapse 屬性")