Thuộc tính border-spacing

Đăng bởi: Admin


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


vncoder logo

Theo dõi VnCoder trên Facebook, để cập nhật những bài viết, tin tức và khoá học mới nhất!