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ợ

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.

Link liên quan

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!