Can Equal Width Table Cells Be Achieved with Pure CSS for an Indeterminate Number of Cells?

Equal Width Table Cells with Indeterminate Number of Cells

In a scenario where a table contains an unpredictable number of table-cell elements, can pure CSS be utilized to establish equal widths for these cells regardless of varying content sizes?

Answer:

Yes, it is possible using the following CSS declarations:

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

div > div {
  display: table-cell;
  width: 2%; /* or 100% if preferred */
}</code>

This solution introduces table-layout: fixed;, which, in combination with a specified width for each cell (2% in this example), triggers a specific table algorithm that strives to respect the designated dimensions. Keep in mind that Safari 6 on OS X may exhibit different results due to its non-standard implementation of table-layout: fixed;.

The above is the detailed content of Can Equal Width Table Cells Be Achieved with Pure CSS for an Indeterminate Number of Cells?. For more information, please follow other related articles on the PHP Chinese website!