Thuộc tính border-spacing

Đị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ợ

  • Internet Explorer
  • Firefox
  • Opera
  • Google Chrome
  • Safari

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.