How Can I Create a Table with Fixed and Variable-Width Columns Using calc()?

Using calc() with Tables: Fixed and Variable-Width Columns

In attempting to create a table with fixed-width and variable-width columns using the CSS calc() function, you may encounter issues with percentages (%). Tables have specific rules for space distribution that make calc() incompatible.

Solution Using table-layout:

To resolve this, set the table-layout attribute to fixed for the table. This forces the table's child elements (td) to adhere to the specified widths. Additionally, set the table's display to table and provide a width.

table{
   table-layout:fixed;
   width: 100%;
   display: table;
}

Percentage-Based Columns:

For the remaining columns, use plain percentages instead of calc(). The remaining space after accommodating the fixed-width columns will be distributed proportionally among these columns.

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

Note:

To use this solution, the table display must be set to table, which prevents you from setting a height.

Modified Example:

Here's a modified version of your original code:

The above is the detailed content of How Can I Create a Table with Fixed and Variable-Width Columns Using calc()?. For more information, please follow other related articles on the PHP Chinese website!