Thuộc tính tableLayout của Style trong HTML DOM

Thuộc tính tableLayout của Style trong HTML DOM trả về và cho phép sửa đổi cách các ô, hàng và cột của bảng được bố trí trong tài liệu HTML.

Cú pháp

Cú pháp như sau:

1. Lấy giá trị tableLayout

object.tableLayout

2. Thiết lập tableLayout

object.tableLayout = "value"

Ở đây value có thể là:

Giá trị	Giải thích
initial	Đặt thuộc tính này về giá trị mặc định.
inherit	Kế thừa giá trị thuộc tính từ phần tử cha.
fixed	Đặt chiều rộng cột dựa trên chiều rộng của cột và bảng.
auto	Đặt chiều rộng cột dựa trên chiều rộng của nội dung rộng nhất không thể ngắt trong bảng.

Ví dụ

Dưới đây là ví dụ minh họa thuộc tính tableLayout của Style:

<!DOCTYPE html>
<html>
<style>
  body {
    color: #000;
    background: lightblue;
    height: 100vh;
    text-align: center;
  }
  table {
    margin: 2rem auto;
    width: 400px;
  }
  .btn {
    background: #db133a;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 40%;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
    margin: 1rem auto;
  }
</style>
<body>
<h1>Demo thuộc tính tableLayout của Style</h1>
<table border="2">
  <caption>Danh sách sinh viên</caption>
  <tr>
    <th>Tên</th>
    <th>Mã số</th>
  </tr>
  <tr>
    <td>John</td>
    <td>031717</td>
  </tr>
  <tr>
    <td>Elon</td>
    <td>041717</td>
  </tr>
</table>
<button onclick="show()" class="btn">Thiết lập tableLayout</button>
<script>
  function show() {
    document.querySelector('table').style.tableLayout = "fixed";
  }
</script>
</body>
</html>

Kết quả

Thuộc tính tableLayout của Style trong HTML DOM

Nhấn vào nút "Thiết lập tableLayout" để đặt tableLayout với giá trị fixed:

Thuộc tính tableLayout của Style trong HTML DOM