How to Use Percentages for Variable Width Columns in Tables with Fixed Width Columns?

Using calc() with Tables: An Alternative Solution

When attempting to implement fixed-width and variable-width table columns using the calc() function, one may encounter limitations. In tables, the calc() function does not support percentages for width calculations.

To overcome this challenge, consider adopting a different approach:

1. Set the table-layout attribute: Force the columns to adhere to specific widths by setting the table-layout property to "fixed" for the table. Additionally, assign a width of 100% to the table.
2. Remove calc() and use percentages: Instead of calc(), use plain percentages for the remaining columns. Determine the fixed width columns and assign their widths. The remaining space will be distributed proportionally among the relative width columns.

Example CSS:

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

td.album {
    width: 20%;
}

Key Points:

• Setting table-layout to "fixed" ensures column widths adhere to the specified values.
• Using percentages for relative width columns allows the remaining space to be distributed proportionally.
• Display:table is required for table-layout to work, but it prevents the use of height for the table.

Modified Example Code:

<table border="0">

The above is the detailed content of How to Use Percentages for Variable Width Columns in Tables with Fixed Width Columns?. For more information, please follow other related articles on the PHP Chinese website!