How to Equalize Width of Table Cells in CSS?

Equalizing Width of Table Cells in CSS

In a table with multiple cells, ensuring equal widths can be challenging when the content within each cell varies. This issue arises when attempting to set a maximum width, as it would require knowledge of the total number of cells.

Pure CSS Solution

Fortunately, there exists a pure CSS solution to equalize the width of table cells, regardless of content variation. This technique utilizes the following CSS properties:

1. table-layout: fixed;: This property enforces a fixed layout for the table, ensuring that the cells respect the specified widths.
2. Width on each cell: To trigger the alternative table calculation algorithm, we assign a small width (e.g., 2%) to each cell.

Implementation

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

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

This CSS will ensure that the table cells have equal widths, even with differing content.

Compatibility Considerations

The table-layout: fixed; property is widely supported in modern browsers, including Chrome and IE8 . However, Safari 6 on OS X implements this property differently, potentially leading to unexpected results. As a precaution, it's recommended to test your solution across various browsers to account for any potential compatibility issues.

The above is the detailed content of How to Equalize Width of Table Cells in CSS?. For more information, please follow other related articles on the PHP Chinese website!