table-layout: auto

[goodoldneon]

First off, I love Ember Light Table! Much easier than manually creating tables.

I'd like my table to behave like it has the CSS attribute "table-layout: auto". In other words, column widths change to accommodate the width of their contents. But since Ember Light Table renders the table head as a separate table, "table-layout: auto" doesn't consider the width of the body data below.

For example, look at the "League" column (4th from the left). It's wider than the column since Ember Light Table makes all the columns the same width:

When I give the head and body tables the "table-layout: auto" attribute, the columns become misaligned:

[buschtoens]

table-layout: auto cannot be used due to the way we enable scrolling, as you already indicated. In my opinion this really is a shortcoming of HTML / CSS. Do a quick Google search for scrollable tables and you won't find a satisfying solution with dynamically sized columns.

table-layout: auto is quite slow for big tables anyway. I'd suggest we improve on the already existing width property of the Column class. Currently the value is transparently passed through to the HTML width attribute, which is deprecated in HTML5 and is limited to pixel values (at least in Chrome).

Two possible ideas:

• Pass the width property to an inline style attribute (style="width: {{width}}") to enable all sizing units.
• Build a more elaborate sizing system using flexbox and disable the default browser table layout completely.

I think flexbox would be a great fit here.

[offirgolan]

@buschtoens a PR is always welcomed 😜

[buschtoens]

@offirgolan What browser compatibility range do you strive for? The flexbox implementation in IE11 is workable but has some considerable bugs as outlined here.

I haven't given this any deeper thought yet, but I'll try to cook something up that works in IE11.

[offirgolan]

Pass the width property to an inline style attribute (style="width: {{width}}") to enable all sizing units.

I think this will be an easy solution as of right now.

Build a more elaborate sizing system using flexbox and disable the default browser table layout completely.

I would love to see this solution in action @buschtoens but that will take much more time and will need to be discussed further. If you have time to put

If you're up to it, can you handle the first solution as an intermediate fix?

[offirgolan]

Resolved with #163 via using style="width: {{width}}" instead of width="{{width}}"