Cách bố cục ô, hàng, cột bảng (tableLayout) bằng JavaScript

Thuộc tính tableLayout kiểm soát thuật toán bố cục bảng. Hai giá trị chính: auto (mặc định, tính theo nội dung) và fixed (tính theo width cột cố định, nhanh hơn).

Ví dụ minh họa

Mã sau chuyển bảng sang table-layout: fixed khi nhấn nút:

<!DOCTYPE html>
<html>
<head>
  <style>
    table, td {
      border: 2px solid blue;
    }
    #myID {
      width: 100%;
    }
  </style>
</head>
<body>
  <button onclick="setTableLayout()">Đặt Layout = Fixed</button>
  <table id="myID">
    <tr><td>Văn bản demo dài</td><td>Văn bản khác</td></tr>
    <tr><td>Một</td><td>1</td></tr>
    <tr><td>Hai</td><td>2</td></tr>
    <tr><td>Ba</td><td>3</td></tr>
  </table>
  <script>
    function setTableLayout() {
      document.getElementById("myID").style.tableLayout = "fixed";
      /* Cột sẽ tuân theo width định nghĩa (hoặc chia đều), không co giãn theo nội dung */
    }
  </script>
</body>
</html>

So sánh auto vs fixed

Lưu ý khi dùng fixed

• Cần định nghĩa width cho bảng (hoặc col, colgroup).
• Nội dung quá dài sẽ bị cắt/đè (dùng overflow, text-overflow, white-space để xử lý).
• Cột không có width sẽ chia sẻ không gian còn lại đều nhau.