Using calc() with tables
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.
Using calc() in table
You must set table-layout
property to 'fixed'.
See using calc() with tables
And working example: https://jsfiddle.net/rpyydd5n/3/
table-layout: fixed percentage and calc not working
If you have fixed table layout check "CSS Only Fixed Table Headers" on codepen
But if you have dynamic content or a lot of data in a table, you can use position: relative
and change top
property with js.
Here is a simple codepen to better understand how to do it.
Of course, there are some pros and cons of this method.
Pros
- all widths are calculated in browser-side, so your table header and columns are always the same width
- you use the same table row, so don't need to duplicate any data
- the only calculations on js side is scroll position and position of the header, no need to calculate column widths
- more table data don't slow down calculations, so basically table can be really big.
Cons:
- Js based solution
- scroll events can be really slow.
- more tables slow down calculations
- styling is very limited
Also, there are a lot of other js plugins to make table header fixed
Related Topics
Bullet Point Background Color Attribute? CSS
:After,: Before Issues in Internet Explorer 11
How to Create an Infinite Background Pattern Animation Using Linear-Gradient
How to Add Linear-Gradient Color to Slider
CSS Table Display Differences - Chrome Vs Firefox
Matching First Element in Whole Document
Next-Sibling Combinator Should Not Work with Complex Selectors
CSS Change Icon Color When Input Is Focused
Resource Interpreted as Stylesheet But Transferred with Mime Type Text Plain Issue
How to Align One Item in The Ol to The Right While The Others Are on The Left
Mix Github Markdown Language with CSS
CSS to Remove Text Shadow on Select/Highlight Text (Mozilla)
Showing The Jsf Error Messages
Bootstrap 3 Full Width Image and Div in Container
CSS Doesn't Load After Migration of Magento Website
How to Split a String (E.G. a Long Url) in a Table Cell Using CSS
How to Select My CSS Module Class Using Document.Queryselector