Cleanest way to achieve a table in css, which one column is without explicit width (but wrap content), while the others with fixed width?

user_8036814 0
Viewed 73

I am having two tables that each takes up 50% of the screen, both looks like exactly the same. Each table contains three columns, The first column does not have explicit width, which takes up all the available space. The other two columns have fixed width no matter in what screen size. I want the content of the third column to be wrapped.

I tried to use a grid to construct a table like this: 

display: grid;
grid-template-columns: auto 80px 60px;

And I use a flex at the first column like this:

display: flex;
align-items: center;
flex-grow: 1;
flex-wrap: wrap;

This code works well if the content of the first column does not overflow, however the content will overflow if the content of the first column is too long (probably because flex-wrap would not work without explicit width, but I need the first column (without explicit width), with its content wrapped, to fill the remaining space).

I'm wondering, if this should be achieved with a flex/table/grid, and how to handle the first column (is that even possible?) with css.

Here is two images of the tables in different screen (first smaller screen, second larger screen)

Tables in a smaller screen

Tables in a larger screen

reactjs sass css
1 Answers

I'd recommend using word-break to "set whether line breaks appear wherever the text would otherwise overflow its content box."

Available values:

  • normal - "Use the default line break rule."
  • break-all - "To prevent overflow, word breaks should be inserted between any two characters (excluding Chinese/Japanese/Korean text)."
  • keep-all - "Word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as for normal."
  • break-word - "To prevent overflow, normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line."

Note from docs:

In contrast to word-break: break-word and overflow-wrap: break-word, word-break: break-all will create a break at the exact place where text would otherwise overflow its container (even if putting an entire word on its own line would negate the need for a break).

user_24304140
Related