Responsive Tables with No CSS Variables
Yesterday's blog post had a solution for responsive tables that relies on CSS variables to calculate the width of the cells. It's possible to polyfill that functionality with Javascript, but we'd really like not to resort to that. As usual, the answer was right in front of us—we just needed to use the same quantity queries we already had!
Updates!
In yesterday's post, we set the width of the cells using CSS variables that we set through quantity queries, like so:
tr > * {
width: calc(100% / var(--column-count));
@for $i from 1 to $max_columns {
@include exactly($i) {
--column-count: $i;
@if ($i%2!=0) {
--odd-adjuster: 1;
}
}
}
}
To remove the variables, all we had to do is set the width within the @for loop. Here's how:
tr > * {
@for $i from 1 to $max_columns {
@include exactly($i) {
$column-count: $i;
width: calc(100% / #{$column-count});
}
}
}
We do the same at mobile width, as you can see here:
@media screen and (max-width: 720px) {
tr:not(:first-child) {
> * {
@for $i from 1 to $max_columns {
@include exactly($i) {
$column-count: $i;
width: calc(100% / calc( 1 + calc(#{$column-count} / 2)));
@if ($i%2!=0) {
width: calc(100% / calc( 1 + calc(calc(#{$column-count} - 1) / 2)));
}
}
}
}
}
}
Here's a CodePen showing the updated work. With those simple changes, we've gotten rid of CSS variables. That means this responsive table implementation should work in every browser that supports calc!