Kiểm soát bố cục bảng (Table Layout) bằng CSS

Để kiểm soát bố cục bảng, sử dụng thuộc tính table-layout. Các giá trị có thể thiết lập:

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

Ví dụ 1: table-layout: auto (mặc định)

Chiều rộng cột tự điều chỉnh dựa trên nội dung.

<!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>Bảng xếp hạng đội</h2>
<table id="demo">
  <tr><th>Đội</th><th>Xếp hạng</th><th>Điểm</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>

Kết quả

Ví dụ 2: table-layout: fixed

Chiều rộng cột được xác định bởi chiều rộng bảng và cột, không phụ thuộc nội dung. Nhanh hơn cho bảng lớn.

<!DOCTYPE html>
<html>
<head>
<style>
table {
  background-color: green;
  color: white;
}
table#demo {
  table-layout: fixed;
  width: 100%;
}
</style>
</head>
<body>
<h2>Bảng xếp hạng đội</h2>
<table id="demo">
  <tr><th>Đội</th><th>Xếp hạng</th><th>Điểm</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>

Kết quả

So sánh: