Possible to use CSS calc() with a variable on the right side?
So due to having a build team who's training/experience in HTML/CSS/et al. is entirely what they've picked up in the last 3-ish months since they were brought on to the project I'm working on, I'm trying to move as much as possible into the CSS code and get the bulk of it out of the HTML doc and into it's own file. Most of this is pretty straight forward (section headers are a uniform font and background color, all tables require x border and y vertical alignment, all text on the page must be in z font family, etc.), there's some code that's driving me a bit nuts.
We have about 10 different document types (think "templates" but not as Dreamweaver would define them), all of them have some form of table. Most of the tables are two column (one header column and one data column), but there's three document types that have between 7-20 data columns, and periodically one of the other document types requires 2-3 data columns.
I've managed to track down the calc() function in CSS and I'm pretty sure this is what I want to use. Absent using Javascript (and good heavens I don't want to open that can of worms on this team) to count the columns and create the "width=" statement on the fly, I'm thinking this might be the best option, however, due to the mentioned variability in how many data columns can be expected in a given HTML document, I was hoping to declare a variable on the individual page and have the width calculation be based on that, meaning that when the build team is inserting the data (I know, if I were doing this project from the start we'd be dynamically populating a bunch of HTML templates from a database, but I wasn't on this project when it started, and we're already 50-60% in), if they needed to define a number of columns in the table, they just change the variable in the embedded CSS code:
Defined in the page:
.data_columns {
--data-number-of-columns: 2;
}
Defined in the CSS file:
.data_columns {
width: calc(80%/var(--data-number-of-columns));
}
Problem is it's not calculating. If I replace "var(--data-number-of-columns)" with an actual number (2 in this example), it calculates just fine. If I read the online documentation right, this is because the number on the right side of the division line can't be a variable. (...I think? It's kinda opaque, honestly)
Is there a way to use a declared variable in a calc() division statement? Am I approaching this entirely wrong?
Any help would be appreciated.
