Constrained columns dot not cap max-width of cells to the constrain anymore + Columns with colspan can grow to larger than the defined width of their spanned columns

Confirmed Issue #8323528 • Assigned to Francois R.

Details

Created
Jul 29, 2016
Privacy
This issue is public.
Found in
  • Microsoft Edge
Reports
Reported by 2 people

Sign in to watch or report this issue.

Steps to reproduce

I have created a fiddle which demonstrates the issue:

https://jsfiddle.net/ovesmumh/1/

I expect all columns in both tables to have the same width, but in Edge spanned columns which have content larger than the combined width of their spanned columns will cause the columns to grow larger (even if the content can be wrapped). Both Firefox and Chrome render the table as expected (see attachment with screenshots from Edge and Chrome).

Attachments

1 attachment

Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “Bogdan B.”

  • Thank you for reaching out to us.

    First of all, I think it is valuable to say that to achieve the layout you currently want (specifying every width on the <col> elements and having them be authoritative) you might actually want to use table-layout:fixed;https://jsfiddle.net/ovesmumh/2/](https://jsfiddle.net/ovesmumh/2/). In the table-layout:auto mode, widths are actually being handled as minimum widths instead, which you can verrify our layout engine does properly.[https://jsfiddle.net/ovesmumh/2/](https://jsfiddle.net/ovesmumh/2/). In the table-layout:auto mode, widths are actually being handled as minimum widths instead, which you can verrify our layout engine does properly.

    Now, it seems the other browsers do not follow the CSS Tables Column Measurement Algorithm in this case and try to preserve to width specified directly on the column, and we want to be interoperable in this case, of course. I’m going to have the CSS Tables spec updated with a change that would make it require the current Firefox/Chrome behavior.

    I cannot commit on any time frame for this change to reflect in our implementation, though, so I highly recommend using table-layout:fixed if you can.

  • Microsoft Edge Team

    Changed Assigned To from “Bogdan B.” to “Francois R.”

    Changed Title from “Columns with colspan can grow to larger than the defined width of their spanned columns” to “Constrained columns dot not cap max-width of cells to the constrain anymore + Columns with colspan can grow to larger than the defined width of their spanned columns”

  • Merging another issue in this one, since both have the same root cause spec-wise and should be fixed together (though they are two different locations in the code)

  • Microsoft Edge Team

    Changed Status to “Confirmed”

  • The suggested fix with table-layout: fixed does not work in most of our cases as we have content that can be larger than the specified width (which cannot be wrapped)

    For example see:
    https://jsfiddle.net/ovesmumh/3/

    So for our case we expect the widths to be minimum widths, and only expand when the content cannot be fitted in the specified width.
    Without colspan the Edge implementation seems to behave similar to the other browsers (see the first column in the first table) however it seems to behave different when spanning multiple columns.

  • Sorry to hear about that. It seems I missed your message’ notification but here am I back with some other workaround wich might work for you, forcing the width of the th elements to their expected value.

    https://jsfiddle.net/ovesmumh/5/](https://jsfiddle.net/ovesmumh/5/)[https://jsfiddle.net/ovesmumh/5/](https://jsfiddle.net/ovesmumh/5/)

     

     

    I confirmed this works in every browser, but this does require duping your code somewhat. You can do this inline if you usually set your <col> inline as well.

     

    Best regards,

    Francois

  • Similarly to this, I noticed that on Chrome/Firefox/etc, if only one of the table cells (be it the header cell, or a body cell) has an explicit width set, the width will be respected for the entire column. On Edge, unless I set the width on every single TD/TH in the column, it’ll just use its “best guess” for the width. Inside the cells, I have buttons on the last column of each row (i.e. Edit/Delete action buttons) which use width percentages, and on Edge it makes these buttons gigantic because it sizes the column way larger than it should be. I didn’t make a new issue because it seems related to the column sizing algorithm discussed here. I hope this can be fixed, it’s pretty annoying to have to implement workarounds for one-off browsers that don’t behave as all other browsers do. :(

You need to sign in to your Microsoft account to add a comment.

Sign in