Thuộc tính table-layout trong CSS dùng để quy định chiều rộng cột tự động bằng cách dùng auto hoặc dùng fixed để chiều rộng các cột đều bằng nhau, chi tiết như nào hãy cùng chúng tôi phân tích:

Thuộc tính table-layout trong CSS

Chức năng của Thuộc tính table-layout trong CSS

Thuộc tính table-layout trong CSS dùng để quy định chiều rộng cột tự động bằng cách dùng auto hoặc dùng fixed để chiều rộng các cột đều bằng nhau.

Cú pháp của Thuộc tính table-layout trong CSS

table-layout: giatri;

giatri: Giá trị để quy định chiều rộng cột tự động bằng cách dùng auto hoặc dùng fixed để chiều rộng các cột đều bằng nhau (Ví dụ: fixed, auto)

Các giá trị của Thuộc tính table-layout trong CSS

fixed: Canh chiều rộng các cột đều bằng nhau.

auto: Canh chiều rộng các cột tự động

Code Thuộc tính table-layout trong CSS

table-layout: fixed; Canh chiều rộng các cột đều bằng nhau

table-layout: auto; Canh chiều rộng các cột tự động

<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính table-layout trong CSS</title>
<style>
table{width:100%;border-collapse: collapse; font-family: sans-serif; font-size: 15px; letter-spacing: 1px;margin-bottom:15px}
table, th, td { border:1px solid black; }
td, th {text-align: left; padding: 8px; }
caption{padding: 8px;text-transform: uppercase;font-size:18px;font-weight:bold}
tr:nth-child(even) { background-color: #dddddd; }
</style>
</head>
<body>
<h1>Code Thuộc tính table-layout trong CSS</h1>

<p>Dùng để quy định chiều rộng cột tự động bằng cách dùng auto hoặc dùng fixed để chiều rộng các cột đều bằng nhau:</p>

<h2>table-layout: fixed; Canh chiều rộng các cột đều bằng nhau</h2>
<table style="table-layout: fixed;">
  <thead>
    <tr>
      <th>STT</th>
      <th>Họ Tên</th>
      <th>Lương</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Bùi Tấn Lực</td>
      <td>20.000.000VNĐ</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Trần Thị Vân</td>
      <td>25.000.000VNĐ</td>
    </tr>
   <tr>
      <td>3</td>
      <td>Nguyễn Thùy Dung</td>
      <td>20.000.000VNĐ</td>
    </tr>
   <tr>
      <td>4</td>
      <td>Trần Ngọc Thanh</td>
      <td>20.000.000VNĐ</td>
    </tr>
  </tbody>
 
</table>

<h2>table-layout: auto; Canh chiều rộng các cột tự động</h2>
<table style="table-layout: auto;">
  <thead>
    <tr>
      <th>STT</th>
      <th>Họ Tên</th>
      <th>Lương</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Bùi Tấn Lực</td>
      <td>20.000.000VNĐ</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Trần Thị Vân</td>
      <td>25.000.000VNĐ</td>
    </tr>
   <tr>
      <td>3</td>
      <td>Nguyễn Thùy Dung</td>
      <td>20.000.000VNĐ</td>
    </tr>
   <tr>
      <td>4</td>
      <td>Trần Ngọc Thanh</td>
      <td>20.000.000VNĐ</td>
    </tr>
  </tbody>
 
</table>
</body>
</html>

Chạy Thử

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thuộc tính table-layout trong CSS.

5/5 - (1 Đánh giá)
0 Bình luận

Bùi Tấn Lực

CEO Bùi Tấn Lực người sáng lập ra Web Mới, là một lập trình viên website, người viết content, chuyên tư vấn các vấn đề về website và SEO website

Chia sẻ nội dung đánh giá của bạn về Thuộc tính table-layout trong CSS
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bình luận, Hỏi đáp

Đăng ký tư vấn miễn phí

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn