Possible to use CSS calc() with a variable on the right side?

[Princess Columbia]

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.

[pziecina]

IE/Edge and firefox does not support the calc function on the width of table cells, (not 100% true) and has been reported as a bug.

Unless html tables are absolutely necessary, then look at using css tables.

[Princess Columbia]

IE/Edge and firefox does not support the calc function on the width of table cells, (not 100% true) and has been reported as a bug.

We're using Chrome standardized across the whole organization, so this part, at least, isn't a problem.

Unless html tables are absolutely necessary, then look at using css tables.

You got a link for that?

[pziecina]

https://www.onenaught.com/posts/201/use-css-displaytable-for-layout

[Princess Columbia]

I'll take a closer look at that later (I think it will solve a problem elsewhere in this project I've been pondering for a while), but in the case of the tables I'm referring to for this problem, structural tables are, indeed, more appropriate. That may change in the future, but that won't be for at least another year and would require a pretty significant change in the way they're storing their data to be useful.

Thanks for the head's up on that, though.

[pziecina · Accepted solution]

One other item, don't forget to use spaces, so your -

80%/var

should be -

80% / var

The 'no spaces' was the old webkit implementation used with the webkit vendor prefix.

[Princess Columbia]

This did it, it was the missing space that was borking things up.

Thanks for your help!