border-collapse屬性是用於表格元素的, 可以用來設定表格的兩邊框合併為一個單一的邊框。所有主流瀏覽器都支援 border-collapse 屬性。
css border-collapse屬性怎麼用?
border-collapse 屬性設定表格的邊框是否合併為單一的邊框,或是像在標準的 HTML 中分開顯示。
語法:
border-collapse: separate|collapse|inherit;
屬性值:
● separate:預設值。邊框會被分開。不會忽略 border-spacing 和 empty-cells 屬性。
● collapse:如果可能,邊框會合併為單一的邊框。會忽略 border-spacing 和 empty-cells 屬性。
● inherit:規定應該從父元素繼承 border-collapse 屬性的值。
註解:所有主流瀏覽器都支援 border-collapse 屬性。任何的版本的 Internet Explorer (包括 IE8)都不支援屬性值 "inherit"。如果沒有規定 !DOCTYPE,則 border-collapse 可能會產生意想不到的結果。
css border-collapse屬性 範例
<!DOCTYPE> <html> <head> <meta charset="utf-8"> <style type="text/css"> table{ border-collapse:collapse; } table, td, th{ border:1px solid black; } </style> </head> <body> <table> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>Bill</td> <td>20</td> </tr> <tr> <td>Steven</td> <td>25</td> </tr> </table> </body> </html>
效果圖:
以上是css border-collapse屬性怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章!