Thuộc tính borderCollapse trong HTML DOM Style

Thuộc tính borderCollapse kiểm soát việc các ô <table> có chia sẻ viền (collapse) hay tách biệt (separate). Chỉ áp dụng cho bảng.

Cú pháp

object.style.borderCollapse = "separate|collapse|initial|inherit"

Các giá trị

Giá trị	Mô tả
separate	Mỗi ô có viền riêng (mặc định).
collapse	Các ô liền kề chia sẻ một viền chung.
initial	Đặt về mặc định.
inherit	Kế thừa từ cha.

Ví dụ

Thu gọn viền bảng:

<!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 = "Viền bảng đã thu gọn"; 
  } 
</script> </head> 
<body> 
<table id="t1"> 
  <tr><th>TRÁI CÂY</th><th>GIÁ</th></tr> 
  <tr><td>XOÀI</td><td>40</td></tr> 
  <tr><td>TÁO</td><td>50</td></tr> 
</table> 
<p>Nhấn nút để thu gọn viền bảng</p> 
<button onclick="collapseBorder()">THU GỌN VIỀN</button> 
<p id="Sample"></p> 
</body> </html>

Kết quả

Bảng separate (viền đôi giữa các ô):

Thuộc tính borderCollapse trong HTML DOM Style

Sau khi collapse (viền đơn chung):

Thuộc tính borderCollapse trong HTML DOM Style