การควบคุมเลย์เอาต์ตารางด้วย CSS (table-layout)

เพื่อควบคุมเลย์เอาต์ตาราง ให้ใช้คุณสมบัติ table-layout สามารถตั้งค่าได้ดังนี้:

table-layout: auto | fixed | initial | inherit;

ตัวอย่าง: ใช้ค่า auto (ค่าเริ่มต้น)

เมื่อใช้ auto ความกว้างคอลัมน์จะปรับตามเนื้อหา

<!DOCTYPE html> <html> <head> <style> table {    border-collapse: collapse;    background-color: black;    color: white; } table#demo {    table-layout: auto;    width: 210px; } </style> </head> <body> <h2>Team Ranking Table</h2> <table id="demo"> <tr> <th>Team</th> <th>Rank</th> <th>Points</th> </tr> <tr> <td>India</td> <td>1</td> <td>200</td> </tr> <tr> <td>England</td> <td>2</td> <td>180</td> </tr> <tr> <td>Australia</td> <td>3</td> <td>150</td> </tr> <tr> <td>NewZealand</td> <td>4</td> <td>130</td> </tr> <tr> <td>SouthAfrica</td> <td>5</td> <td>100</td> </tr> <tr> <td>WestIndies</td> <td>6</td> <td>80</td> </tr> <tr> <td>Pakistan</td> <td>7</td> <td>70</td> </tr> </table> </body> </html>

ผลลัพธ์

ตัวอย่าง: ใช้ค่า fixed

เมื่อใช้ fixed ความกว้างคอลัมน์จะถูกกำหนดโดยความกว้างของตารางและคอลัมน์แรก ไม่ขึ้นกับเนื้อหา ทำให้เรนเดอร์เร็วขึ้น

<!DOCTYPE html> <html> <head> <style> table {    background-color: green;    color: white; } table#demo {    table-layout: fixed;    width: 100%; } </style> </head> <body> <h2>Team Ranking Table</h2> <table id="demo"> <tr> <th>Team</th> <th>Rank</th> <th>Points</th> </tr> <tr> <td>India</td> <td>1</td> <td>200</td> </tr> <tr> <td>England</td> <td>2</td> <td>180</td> </tr> <tr> <td>Australia</td> <td>3</td> <td>150</td> </tr> <tr> <td>NewZealand</td> <td>4</td> <td>130</td> </tr> <tr> <td>SouthAfrica</td> <td>5</td> <td>100</td> </tr> <tr> <td>WestIndies</td> <td>6</td> <td>80</td> </tr> <tr> <td>Pakistan</td> <td>7</td> <td>70</td> </tr> </table> </body> </html>

ผลลัพธ์

ความแตกต่างระหว่าง auto และ fixed