I have tables with various widths and want to truncate the columns and its content with text-overflow:ellipsis to fit the screen (down to the width of the column header, then horizontal scroll), but without setting a fixed or 100% table/column width (not stretching wider than its content).
I’m open to using different display attributes on the table/cells to achieve this, but I don’t want to replace the table with divs, wrap the cell contents or use a fixed-width container div (as used in the illustration below).
I have found similar questions about truncating tables columns, but they all seem to use absolute widths for the tables. There must be a way to combine max-widths with min-widths, 0% with 100% values or use fit-content and similar properties, but I haven’t found the right combination. To me this seems like a simple concept and all the CSS attributes needed are there, but I’ve spent days trying to make it work.
There probably is a solution if you convert the table display to grid but it would mean using sub grid which has very little support so not worth considering at this time.
You would probably have to nest an element in the td and truncate that element instead but as you didn’t want any extra html I didn’t test it out.
I’ll have another look tomorrow when I have more time in case I missed a trick
Thanks. I’m aware of those solutions, but still think it should be possible with a standard HTML table without nesting cell content - since it works with tables using 100% width (see jsfiddle).
Can I place a pseudo element to the right of the 100% width table to force it down to only fit content?
Is nobody using text truncation in tables because it’s seen as bad practice (but suitable for me)?
I have run into this problem many times in the last 20 years and its always been a problem to get text-overflow on a table-cell.
The problem is that for there to be overflow there generally needs to be a width otherwise there is effectively nothing to overflow. Tables generally treat widths and heights in special ways anyway and will allow elements to force the issue unless the table-layout:fixed algorithm is used.
The specs don’t help as they say that if the width of an element is dependent on the width of its children whose width in turn is dependent on the parent then the layout is undefined.
Its a similar problem where you put an image in the float but if you give the image width:100% then some browser will assume that is 100% of its parent width which for a float is dictated by its content so you get no width at all.
Flex has a similar problem but grid seems to have overcome that issue.
Therefore the only workable solution I can see without changing the html is as follows.
It uses display;grid and display:contents to get the effect you want.
However it is unlikely to work in Safari or ios (and if it does it may have accessibility issues). In time the issues should be resolved (but who knows when).
As you say there may indeed be another solution but I remember testing this out quite extensively a long time ago and that was before min/max -content and fit-content were around so I’ll never say never
Thank you so much for this! You explained the core issue very well, provided a workable solution and shared valuable accessibility info - this is very helpful!
Sorry, but if you don’t mind - the platform I’m using (MediaWiki) automatically wraps THEAD tags around the headers and then they don’t align with the TD column widths. How do I apply the same effect to a table using thead tags? I’ve tried various css properties on thead and searched for solutions online without luck. The last piece of the puzzle I need to solve this week-long struggle…
Thanks! The only problem is that border-collapse doesn’t work with grid display and I’m using borders and no cell-spacing (I should have shown this instead), but I found a workaround solution (border-width: 1px 1px 0 0, etc.). I couldn’t be more grateful.
