Can you create equal width table cells with varying content using purely CSS?

Equal Width Table Cells with Variable Content

Consider a scenario where you have multiple table-cell elements inside a table container. Despite having different content sizes, you want these table-cells to have equal widths. Is there a purely CSS solution to achieve this?

Solution:

To achieve equal-width table-cells regardless of content size, you can utilize the following CSS approach:

1. Fixed Table Layout: Apply table-layout: fixed; to the parent div representing the table. This essentially instructs the browser to adhere strictly to the specified cell widths.
2. Minimum Cell Width: Set a minimum width, even a small one like 2%, for each cell (div > div). This triggers the desired table layout algorithm, where the browser attempts to respect the specified cell dimensions.

Code Example:

<code class="css">div {
  display: table;
  width: 250px;
  table-layout: fixed;
}

div > div {
  display: table-cell;
  width: 2%;
}</code>

Note:

This solution works with Chrome, IE8, and Safari 6 (with some caveats). However, it's important to remember that Safari 6 may have different table layout behaviors compared to other browsers.

The above is the detailed content of Can you create equal width table cells with varying content using purely CSS?. For more information, please follow other related articles on the PHP Chinese website!