2

I'm trying to create a flexible table layout in which there is one column that does not flex at all. It has just enough room to accommodate a button for an actions dropdown. The remaining rows should consume the following space entirely and truncate if need be.

https://codesandbox.io/s/awesome-galois-i70rr?file=/src/App.js

I'm running in a React app, but I'm working with native table elements. While my truncation certainly seems to work, at a certain width there appears to be a breakpoint at which it simply stops truncating and the table overflows the body instead. In theory this should never happen unless the width of the browser is less than the 48px allocated for the button, which of course is never. The other columns should continue to truncate instead of stopping at some random breakpoint. Furthermore, the remaining columns don't flex proportionally to their content. Any ideas on how to fix these two issues?

enter image description here

Malik Brahimi
  • 16,341
  • 7
  • 39
  • 70

1 Answers1

3

This is what happens when you combine table layout with block/flex layout. If you are going to commit display: flex on your table rows, you need to extend the non-table layout method to table and tbody as well.

Changing table and tbody to display: block will fix the problem in your CodeSandbox.

I would also change thead to block display as well, as a best practice and for consistency, even though you won't see any issues with it in your current example since the longest cell of each column is in the tbody instead of the thead. If one of the columns had a column header that was longer than any of the cells in the body below it, you would run into a similar issue if you don't also set thead to block display.

cjl750
  • 4,380
  • 3
  • 15
  • 27
  • Is there also a way to make the columns grow proportion to their content? – Malik Brahimi Apr 21 '20 at 04:38
  • @MalikBrahimi The short answer is that tables have their own layout scheme that is weird. (`tr` is `display: table-row` while `tbody` is `display: table-row-group`, for example). I honestly don't know the nitty-gritty of why things will end up breaking at some exact width given some exact content, just that, in practice, non-user-agent `display` methods on tables don't mix well with the defaults, so if you change one, you gotta change them all. – cjl750 Apr 21 '20 at 04:43
  • Also, I saw your update. You can try `flex: 1 1 auto` instead of `flex: 1 1 0%`, but that may not give you what you want exactly either. If your real-life content isn't as dramatic as your example, it might be okay. You could try a combination of that and `min-width`, but honestly I think this is one of those areas where there isn't an awesome pure CSS way to do things that will always only truncate if absolutely necessary. You are probably looking at JS for a perfect solution. – cjl750 Apr 21 '20 at 04:45
  • I've decided to forego the flex table after learning that I can't really make flex items equal height in the case of a row. Is there any reason why [this](https://codesandbox.io/s/fast-shape-5oqsc?file=/src/App.js) won't truncate? – Malik Brahimi Apr 22 '20 at 06:00
  • 1
    @MalikBrahimi if you haven't found the answer yet: try `max-width: 0` on your class for the cells in the first column. See https://stackoverflow.com/questions/9789723/css-text-overflow-in-a-table-cell. (Admittedly, this makes no sense logically; like I said, tables are weird :)) – cjl750 Apr 26 '20 at 17:42