การใช้งานคุณสมบัติ table-layout ใน CSS

คุณสมบัติ table-layout

คุณสมบัติ table-layout ช่วยควบคุมว่าเบราว์เซอร์ควรแสดงหรือวางตารางอย่างไร คุณสมบัตินี้มีค่าได้ 3 ค่า: fixed, auto, inherit

ตัวอย่าง

ลองรันโค้ดต่อไปนี้เพื่อนำ CSS table-layout ไปใช้:

<html>
  <head>
    <style>
      table.auto {
        table-layout: auto;
      }
      table.fixed {
        table-layout: fixed;
      }
    </style>
  </head>
  <body>
    <table class="auto" border="1" width="100%">
      <tr>
        <td width="20%">1000000000000000000000000000</td>
        <td width="40%">10000000</td>
        <td width="40%">100</td>
      </tr>
    </table>
    <br />
    <table class="fixed" border="1" width="100%">
      <tr>
        <td width="20%">1000000000000000000000000000</td>
        <td width="40%">10000000</td>
        <td width="40%">100</td>
      </tr>
    </table>
  </body>
</html>

ค่าที่ใช้ได้:

• auto - เบราว์เซอร์คำนวณความกว้างจากเนื้อหา (ค่าเริ่มต้น, ช้ากว่า)
• fixed - ใช้ความกว้างที่กำหนด (เร็วกว่า, คาดการณ์ได้)
• inherit - สืบทอดจากพาเรนต์

ข้อดีของ fixed: เร็วกว่า เพราะเบราว์เซอร์ไม่ต้องอ่านเนื้อหาทั้งหมดก่อนจึงจะวางตารางได้