Định nghĩa và sử dụng Thuộc tính border-collapse

Thuộc tính border-collapse xác định đường viền của table có tách biệt ra hay không. Chú ý là thuộc tính border-collapse chỉ được sử dụng cho thành phần table.

Cấu trúc

table {
    border-collapse: giá trị;
}

Với giá trị như sau:

Thuộc tính giá trị Ví dụ Mô tả
border-collapse collapse border-collapse: collapse; Khoảng trống giữa các đường viền (border) của table bị loại bỏ, chỉ còn đường viền duy nhất.
separate border-collapse: separate; Khoảng trống giữa các đường viền (border) của table vẫn giữ nguyên, đây là dạng mặc định của table.
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 :

<html border="1">
<head></head>
<body>
<table>
<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

CSS viết:

table {
    border-collapse: collapse; 
}

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-collapse

Thuộc tính border-collapse đượ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.

Viết câu trả lời

Drop Images

0 Bình luận