今天在操作表格的時候發現設置表格中行的邊框沒有顯示，然后自己新建了一個表格發現確實不顯示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> </head> <style> } tr{ border:1px solid #ccc; } </style> <body> <table> <tr> <td>內容</td> <td>內容</td> <td>內容</td> </tr> <tr> <td>內容</td> <td>內容</td> <td>內容</td> </tr> <tr> <td>內容</td> <td>內容</td> <td>內容</td> </tr> </table> </body> </html>
在瀏覽器中預覽不顯示
后來查到只需要加上一句代碼就顯示
table{
border-collapse: collapse;
}
后來查了下手冊對該屬性的定義
CSS border-collapse 屬性
為表格設置合並邊框模型：
屬性定義及使用說明
border-collapse 屬性設置表格的邊框是否被合並為一個單一的邊框，還是象在標准的 HTML 中那樣分開顯示。
| 默認值: | separate |
|---|---|
| 繼承: | yes |
| 版本: | CSS2 |
| JavaScript 語法: | object object.style.borderCollapse="collapse" |
瀏覽器支持
所有主要瀏覽器都支持border - collapse屬性。
注意： 任何版本的Internet Explorer（包括IE9）支持屬性值"inherit"。
注意: border - collapse屬性,如果沒有指定!DOCTYPE，可能產生意想不到的效果。
Property Values
| 值 | 說明 |
|---|---|
| collapse | 如果可能，邊框會合並為一個單一的邊框。會忽略 border-spacing 和 empty-cells 屬性 |
| separate | 默認值。邊框會被分開。不會忽略 border-spacing 和 empty-cells 屬性 |
| inherit | 規定應該從父元素繼承 border-collapse 屬性的值 |