Tin tức

Học thiết kế web: thuộc tính border-collapse trong css

06/04/2013

Ví dụ:

table
{
border-collapse:collapse;
} 

Thuộc tính border-collapse trong css định nghĩa xem viền của table và các hàng, cột, ô trong table có chập vào nhau thành một "single border" (viền đơn) hay là viền tách rời nhau (như mặc định).

Giá trị mặc định: separate
Thừa kế:
Phiên bản: CSS2
Cú pháp JavaScript: object.style.borderCollapse="collapse"

Thuộc tính border-collapse được hầu hết các trình duyệt lớn hiện nay (Firefox, IE, Chrome, Safari, Opera) hỗ trợ.

Chú ý:

- Giá trị inherit (thừa kế) không được các phiên bản IE hỗ trợ.
- Nếu HTML document của bạn không khai báo !DOCTYPE, rất có thể thuộc tính border-collapse sẽ cho ra kết quả không như ý.

Danh sách các giá trị của thuộc tính border-collapse:

Giá trị Mô tả
Collapse Viền của table và các ô bên trong chập vào nhau thành một viền đơn
Seperate Viền của table và các ô bên trong tách riêng, đây là giá trị mặc định.
Inherit Thừa kế kiểu viền từ phần tử cha.

Hai bảng trên đây là dùng thuộc tính border-collapse với giá trị là collapse, còn dưới đây là ví dụ về giá trị seperate (hay là table mặc định):

1 2
3 4