Can CSS Control Table Cell Widths Regardless of Content Size?

<code class="html"><div style="display: table;">
  <div style="display: table-cell;"></div>
  <div style="display: table-cell;"></div>
</div></code>

CSS can be leveraged to address this issue. To ensure equal cell widths, regardless of content size, we need to:

1. Trigger the Fixed Table Layout Mechanism: Set table-layout: fixed; on the parent
   . This instructs the browser to enforce the specified cell widths rather than auto-adjusting them to content.
2. Assign a Width to Table Cells: While not mandatory, assigning a small width (e.g., 2%) to each
   representing a table cell acts as a trigger for the fixed table layout.

The final CSS code appears as follows:

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

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

With this approach, the table cells will maintain equal widths, ensuring a consistent appearance regardless of their content.

The above is the detailed content of Can CSS Control Table Cell Widths Regardless of Content Size?. For more information, please follow other related articles on the PHP Chinese website!