0

I have a table (auto width) and want the columns only to stretch to fit the cell content width, but then shrink and use text-overflow:ellipsis when the screen is not wide enough. I have tried different widths, values and units, but can only get one or the other function to work.

<table border="1">
  <tr>
    <td style="max-width:fit-content; overflow:hidden; text-overflow:ellipsis; white-space:nowrap">fit cell width to content and truncate text when needed</td>
  </tr>
</table>
Chris W.
  • 22,835
  • 3
  • 60
  • 94
tahoma
  • 27
  • 5
  • Does this answer your question? [CSS text-overflow in a table cell?](https://stackoverflow.com/questions/9789723/css-text-overflow-in-a-table-cell) – Chris W. Sep 20 '21 at 19:55
  • Thank you for the suggestion Chris, I have looked at that and similar threads, but it seems that those solutions all use 100% or fixed width, addtional div/wrap/flex markup or absolute positioning. I just want a table not to be wider its cell contents (auto), and to truncate/shrink the columns (with text ellipsis) when the screen is not wide enough, instead of line breaks, without the specifying widths or the additional markup mentioned above. Maybe using table-layout, min-width and max-width, values like 0, 100% or fit-content values, but I just can't find the right combination. – tahoma Sep 21 '21 at 17:59
  • To accomplish that you'll need a secondary parent content container like the other examples show where it's `
    stuff
    ` unless you want to write a lot of addtional (and likely not as performant) javascript to handle the changes. Which is by design when dealing with tables and their cell content.     – Chris W. Sep 21 '21 at 20:45

0 Answers0