ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
# 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 属性")