Thuộc tính borderCollapse được sử dụng để đặt hoặc trả về việc các phần tử
nên có đường viền chia sẻ hay riêng biệt. Nó có thể nhận hai giá trị, tách biệt và thu gọn.Cú pháp
Sau đây là cú pháp cho -
Đặt thuộc tính borderCollapse -
object.style.borderCollapse = "separate|collapse|initial|inherit"
Giá trị
Các giá trị thuộc tính được giải thích như sau -
| Sr.No | Giá trị &Mô tả |
|---|---|
| 1 | riêng biệt Đây là giá trị mặc định và có đường viền riêng biệt cho từng ô trong bảng. |
| 2 | thu gọn Điều này chỉ định đường viền không được vẽ giữa các giá trị ô bảng. |
| 3 | tên đầu tiên Để đặt thuộc tính này thành giá trị ban đầu. |
| 4 | kế thừa Để kế thừa giá trị tài sản mẹ |
Ví dụ
Hãy để chúng tôi xem xét một ví dụ cho thuộc tính borderCollapse -
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: flex;
float: left;
}
table {
border: 3px solid black;
}
td {
border: 3px solid lightgreen;
}
th {
border: 3px solid lightblue;
}
</style>
<script>
function collapseBorder(){
document.getElementById("t1").style.borderCollapse="collapse";
document.getElementById("Sample").innerHTML="The table borders are now collapsed";
}
</script>
</head>
<body>
<table id="t1">
<tr>
<th>FRUITS</th>
<th>PRICE </th>
</tr>
<tr>
<td>MANGO </td>
<td>40</td>
</tr>
<tr>
<td>APPLE</td>
<td>50</td>
</tr>
</table>
<p>Collapse the above table borders by clicking the below button</p>
<button onclick="collapseBorder()">COLLAPSE BORDER</button>
<p id="Sample"></p>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi nhấp vào nút BIÊN GIỚI THUỘC -
