Computer >> Máy Tính >  >> Lập trình >> HTML

HTML DOM Style border

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 -

HTML DOM Style border

Khi nhấp vào nút BIÊN GIỚI THUỘC -

HTML DOM Style border