Cách gộp viền bảng (borderCollapse) thành một đường duy nhất bằng JavaScript

Thuộc tính borderCollapse kiểm soát việc các viền của ô (<td>, <th>) và viền bảng (<table>) có được gộp thành một đường duy nhất hay tách biệt. Giá trị "collapse" gộp viền, "separate" (mặc định) tách viền.

Ví dụ minh họa

Mã sau gộp viền bảng khi nhấn nút:

<!DOCTYPE html>
<html>
<body>
  <table id="newTable" border="2">
    <tr><th>EmpID</th><th>EmpName</th><th>EmpDept</th></tr>
    <tr><td>001</td><td>Amit</td><td>IT</td></tr>
    <tr><td>002</td><td>John</td><td>Finance</td></tr>
    <tr><td>003</td><td>David</td><td>Marketing</td></tr>
  </table>
  <br>
  <button onclick="collapseBorders()">Gộp viền (collapse)</button>
  <script>
    function collapseBorders() {
      document.getElementById("newTable").style.borderCollapse = "collapse";
    }
  </script>
</body>
</html>

So sánh hai chế độ

Mẹo: Khi dùng collapse, bạn không thể đặt border-radius cho bảng (sẽ bị bỏ qua).