How to Achieve Flexible Column Widths in Tables using CSS Calc() and Table-Layout?

Flexible Column Widths in Tables with CSS Calc

In the pursuit of a table with both fixed-width and flexible-width columns, using CSS calc() function alone may fall short. Tables enforce specific rules for space distribution based on cell content, making it challenging for calc() to evenly distribute the available space.

To overcome this hurdle, we can employ the table-layout attribute set to fixed for the table element. This ensures that the child td elements adhere to the widths we define. Additionally, a width (e.g., 100%) must be specified for the table.

In order for table-layout to take effect, the table must also have a display type of table. This is the default setting and is usually omitted. However, it is included here for completeness.

Now, we can freely use percentages to adjust the widths of the remaining columns. For example:

td.title, td.interpret {
  width: 40%;
}

td.album {
  width: 20%;
}

The remaining space after accounting for fixed-width columns is distributed among the columns with relative widths.

One caveat to note is that using display: table for the table means we can no longer define a height (or min-height or max-height) for the table.

Below is the modified example incorporating these fixes:

The above is the detailed content of How to Achieve Flexible Column Widths in Tables using CSS Calc() and Table-Layout?. For more information, please follow other related articles on the PHP Chinese website!