Support calc() with percentages for table cell and column widths




5 years ago
3 years ago


(Reporter: planet36, Unassigned)



Firefox Tracking Flags

(Not tracked)



(1 attachment)



5 years ago
Created attachment 8357566 [details]
2 tables showing that using percent in calc() does not work

User Agent: Mozilla/5.0 (Windows NT 5.1; rv:26.0) Gecko/20100101 Firefox/26.0 (Beta/Release)
Build ID: 20131205075310

Steps to reproduce:

I tried to make a table with 7 columns of equal width using this style:
th {width: calc(100%/7);}

Actual results:

The width of the columns was "auto".

Expected results:

The width of the columns should have been about 14%.

Comment 1

5 years ago
This is related to #776443.

Comment 2

5 years ago
Workaround: Use 100vw instead of 100%.


5 years ago
Component: Untriaged → CSS Parsing and Computation
OS: Windows XP → All
Product: Firefox → Core
Hardware: x86 → All
Version: 26 Branch → Trunk
I would be very disinclined to do this unless there is an actual specification for the behavior...


5 years ago
Ever confirmed: true
Priority: -- → P5

Comment 4

3 years ago
I got a bit different example for the issue given in the title:,css,output
`calc(10%+20%)` fails. Even though spec says
> Given the complexities of width and height calculations ... math expressions involving percentages for widths ... on table columns ... MAY be treated as if auto had been specified.

But it also says:
> The computed value of a `calc(`) expression is the expression with all components computed, with all multiplication/division subexpressions resolved, and with all addition/subtraction subexpressions resolved where both sides are the same type.
And also gives an example "e.g. `calc(100% - 100% + 1em)` resolves to `calc(0% + 1em)`".

Therefore, I would say that specifications actually guide us to resolve `calc(10% + 20%)` to `calc(30%)`. Such value does not seem to fit "the complexities of width and height calculations", as it fairly resolves, directly, to just `30%`
The basic problem here is that the way percentage widths work on table cells doesn't really deal well with a given cell having components that come from both a percentage and a length, since the table width algorithm assigns each *column* a single width that is either a percentage or a length or auto, and the percentages and lengths behave in substantively different ways.
The relevant code starts here:
(that's a link that should always point to the code as it is today).
Summary: Support percent calc for internal table element widths → Support calc() with percentages for table cell and column widths

Comment 7

3 years ago
Thanks for the answer.

Just to note, in my example, I'm assigning width to a column (`<col>`) not to a cell (`<td>`)
You need to log in before you can comment on or make changes to this bug.