I'm trying to get a table with fixed-width td
s and variable-width td
s.
Im using the CSS calc()
function, but somehow it seems like I can't use %
in tables.
So that is what I have so far:
<table border="0" style="width:100%;border-collapse:collapse;">
<tr style="width:100%">
<td style="width:30px;">1</td> <!--Fixed width-->
<td style="width: calc( (100% - 230px) / 100 * 40);">Title</td> <!--Width should be 40% of the remaining space-->
<td style="width: calc( (100% - 230px) / 100 * 40);">Interpret</td> <!--Width should be 40% of the remaining space-->
<td style="width: calc( (100% - 230px) / 100 * 20);">Album</td> <!--Width should be 20% of the remaining space-->
<td style="width:80px;">Year</td><!--Fixed width-->
<td style="width:180px;">YouTube</td><!--Fixed width-->
</tr>
</table>
How I see it, it should work, but it isn't.
Does anybody know how to solve this? Or maybe has an other suggestion how I could reach my goal?
The calc() function takes a single expression as its parameter, with the expression's result used as the value. The expression can be any simple expression combining the following operators, using standard operator precedence rules: + Addition.
This is also how you can create aspect-ratio locked divs in HTML since you can calculate height from width using padding-top with a percentage value. A solution for you would be to use CSS calc, it has good browser support and fixes your issue in quite a simple manner.
Safari & iOS Safari (both 6 and 7) do not support viewport units (vw, vh, etc) in calc(). So in your case, try not to use viewport units in calc(), since you will have issues in Safari 6 and 7. Usually with calc() you need to also use the -webkit prefix which is required for Safari 6 and Chrome 19-25 per the spec?
Custom properties and calc are the same computational amount as any other property or relative value, respectively. In short: no more than large amounts of CSS would.
Tables have difficult rules about distributing the space of the columns because they distribute space dependent on the content of the cells by default. Calc (atm) just wont work with that.
What you can do however is to set the table-layout
attribute for the table
to force the child td
elements to get the exact width you declared. For this to work you also need a width
(100%
works) on the table.
table{
table-layout:fixed; /* this keeps your columns with at the defined width */
width: 100%; /* a width must be specified */
display: table; /* required for table-layout to be used
(since this is the default value it is normally not necessary;
just included for completeness) */
}
and then use plain percentages on the remaining columns.
td.title, td.interpret{
width:40%;
}
td.album{
width:20%;
}
After using up the space for the fixed width columns, the remaining space is distributed between the columns with relative width.
For this to work you need the default display type display: table
(as opposed to say, display: block
). This however means you can no longer have a height
(including min-height
and max-height
) for the table.
See your modified Example.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With