Định nghĩa và sử dụng
Thuộc tính border-spacing xác định khoảng cách giữa các đường viền của table.
Chú ý là thuộc tính border-spacing chỉ được sử dụng cho thành phần table có các đường viền tách biệt nhau (border-collapse: separate).
Cấu trúc
table {
border-spacing: giá trị;
}
Với giá trị như sau:
| Thuộc tính | giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| border-spacing | độ rộng | border-spacing: 10px; | Độ rộng giữa các đường viền (border) của table. |
| ngang dọc | border-spacing: 10px 20px; | Độ rộng giữa các đường viền (border) của table với giá trị ngang và dọc. | |
| inherit | border-collapse: inherit; | Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài). |
Ví dụ
HTML viết:
<html> <head></head> <body> <table border="1"> <tr> <th>Thu hai</th> <th>Thu ba</th> </tr> <tr> <td>2000d</td> <td>5000d</td> </tr> <tr> <td>500d</td> <td>4000d</td> </tr> </table> </body> </html>
Hiển thị trình duyệt khi chưa có CSS:
| Thu hai | Thu ba |
|---|---|
| 2000d | 5000d |
| 500d | 4000d |
border-spacing với một giá trị, CSS viết:
table {
border-spacing: 10px;
}
Hiển thị trình duyệt khi có CSS:
| Thu hai | Thu ba |
|---|---|
| 2000d | 5000d |
| 500d | 4000d |
border-spacing với 2 giá trị, CSS viết:
table {
border-spacing: 10px 30px;
}
Hiển thị trình duyệt khi có CSS:
| Thu hai | Thu ba |
|---|---|
| 2000d | 5000d |
| 500d | 4000d |
Trình duyệt hỗ trợ
Thuộc tính border-spacing được hỗ trợ trong đa số các trình duyệt.
Giá trị "inherit" không được hỗ trợ trong trình duyệt Internet Explorer, bao gồm cả IE9.