Cách thay đổi độ rộng viền bảng (table border width) bằng JavaScript

Để thay đổi viền của bảng (table) trong JavaScript, bạn có thể dùng thuộc tính shorthand border** trên style của phần tử <table>. Lưu ý: border gán cùng lúc border-width, border-style, border-color.

Ví dụ minh họa

Mã sau thay viền bảng từ 2px solid black thành 5px dashed blue khi nhấn nút:

<!DOCTYPE html>
<html>
<head>
  <script>
    function changeTableBorder(tableId) {
      document.getElementById(tableId).style.border = "5px dashed blue";
    }
  </script>
</head>
<body>
  <table style="border:2px solid black" id="newtable">
    <tr><td>Một</td><td>Hai</td></tr>
    <tr><td>Ba</td><td>Bốn</td></tr>
    <tr><td>Năm</td><td>Sáu</td></tr>
  </table>
  <p>
    <input type="button" onclick="changeTableBorder('newtable')" value="Thay đổi độ rộng viền">
  </p>
</body>
</html>

Lưu ý quan trọng

• Chỉ viền bảng: table.style.border chỉ ảnh hưởng đến viền ngoài của <table>, không làm thay đổi viền của <td> hay <th> bên trong.
• Viền ô (cell): Để đổi viền ô, duyệt qua các ô hoặc dùng CSS: table, td, th { border: ... }.
• borderCollapse: Nếu bảng có border-collapse: collapse, viền bảng và viền ô gộp lại, việc set table.style.border có thể không thấy rõ.

Cách đặt viền cho từng ô (td/th) bằng JS

function setCellBorders(tableId, borderStyle) {
  const table = document.getElementById(tableId);
  const cells = table.querySelectorAll("td, th");
  cells.forEach(cell => cell.style.border = borderStyle);
}
// Gọi: setCellBorders('newtable', '1px solid red');