Bùi Tấn Lực - 104
- 12/10/2025
Bùi Tấn Lực Thuộc tính border-collapse trong CSS dùng để quy định cách các đường viền của các ô td và table có nối liền thành 1 đường viền duy nhất hay tách biệt, chi tiết như nào hãy cùng chúng tôi phân tích:
Thuộc tính border-collapse trong CSS
Chức năng của Thuộc tính border-collapse trong CSS
Thuộc tính border-collapse trong CSS dùng để quy định cách các đường viền của các ô td và table có nối liền thành 1 đường viền duy nhất hay tách biệt.
Cú pháp của Thuộc tính border-collapse trong CSS
border-collapse: giatri;
giatri: Giá trị này dùng để quy định cách các đường viền của các ô td và table có nối liền thành 1 đường viền duy nhất hay tách biệt (separate, collapse)
Các giá trị của Thuộc tính border-collapse trong CSS
separate: Các đường viền của các ô thẻ td tách biệt với đường viền của table và tách biệt với các ô td khác.
collapse: Các đường viền của các ô thẻ td và đường viền của table nếu gần nhau sẽ nối lại thành 1 đường viền duy nhất.
Code Thuộc tính border-collapse trong CSS
border-collapse: collapse; Các đường viền của các ô thẻ td và đường viền của table nếu gần nhau sẽ nối lại thành 1 đường viền duy nhất
border-collapse: separate; Các đường viền của các ô thẻ td tách biệt với đường viền của table và tách biệt với các ô td khác
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính border-collapse trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
table, td, th {
border: 1px solid black;
}
table {margin-bottom:30px;width:100%}
caption {font-size:px}
</style>
</head>
<body>
<h1>Code Thuộc tính border-collapse trong CSS</h1>
<p>border-collapse: separate; Các đường viền của các ô thẻ td tách biệt với đường viền của table và tách biệt với các ô td khác:</p>
<table style="border-collapse: separate;" >
<tr>
<th>Họ Tên</th>
<th>Giới Tính</th>
</tr>
<tr>
<td>Bùi Tấn Lực</td>
<td>Nam</td>
</tr>
<tr>
<td>Trần Thị Vân</td>
<td>Nữ</td>
</tr>
</table>
<p>border-collapse: collapse; Các đường viền của các ô thẻ td và đường viền của table nếu gần nhau sẽ nối lại thành 1 đường viền duy nhất:</p>
<table style="border-collapse: collapse;" >
<tr>
<th>Họ Tên</th>
<th>Giới Tính</th>
</tr>
<tr>
<td>Bùi Tấn Lực</td>
<td>Nam</td>
</tr>
<tr>
<td>Trần Thị Vân</td>
<td>Nữ</td>
</tr>
</table>
</body>
</html>
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính border-collapse trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
