Các ô trong bảng có kích thước bằng nhau để lấp đầy toàn bộ chiều rộng của bảng chứa

Có cách nào sử dụng HTML / CSS (với định cỡ tương đối) để làm cho một hàng ô kéo dài toàn bộ chiều rộng của bảng mà nó được chứa trong đó không?

Các ô phải có chiều rộng bằng nhau và kích thước bảng bên ngoài cũng thay đổi theo <table width="100%">.

Hiện tại nếu tôi không chỉ định kích thước cố định; các ô chỉ tự động thay đổi kích thước để phù hợp với nội dung của chúng.

Bạn thậm chí không phải đặt chiều rộng cụ thể cho các ô, table-layout: fixedchỉ cần trải đều các ô.

ul {
    width: 100%;
    display: table;
    table-layout: fixed;
    border-collapse: collapse;
}
li {
    display: table-cell;
    text-align: center;
    border: 1px solid hotpink;
    vertical-align: middle;
    word-wrap: break-word;
}

<ul>
  <li>foo<br>foo</li>
  <li>barbarbarbarbar</li>
  <li>baz</li>
</ul>

Lưu ý rằng table-layoutđể hoạt động, phần tử được tạo kiểu bảng phải có chiều rộng được đặt (trong ví dụ của tôi là 100%).

Chỉ cần sử dụng phần trăm chiều rộng và bố cục bảng cố định :

<table>
<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
</tr>
</table>

với

table { table-layout: fixed; }
td { width: 33%; }

Bố cục bảng cố định rất quan trọng vì nếu không, trình duyệt sẽ điều chỉnh độ rộng khi nó thấy phù hợp nếu nội dung không vừa vặn, tức là độ rộng là một gợi ý không phải là quy tắc không có bố cục bảng cố định.

Rõ ràng, điều chỉnh CSS để phù hợp với hoàn cảnh của bạn, thường có nghĩa là chỉ áp dụng kiểu cho các bảng có một lớp nhất định hoặc có thể với một ID nhất định.

Sử dụng table-layout: fixednhư một thuộc tính cho tablevà width: calc(100%/3);cho td( giả sử có 3 td' ). Với hai thuộc tính này được thiết lập, các ô trong bảng sẽ có kích thước bằng nhau .

Tham khảo bản demo .