Truncate cell text in table with auto-width

I have tables with various widths and want to truncate the columns and its content with text-overflow:ellipsis when the screen is too small (down to the width of the column header), but without setting a fixed or 100% table/column width.

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 and/or use fit-content and similar properties, but I haven’t found the right combination.

Question. How are people going to read the content in the table if it is truncated that much? I think it is a better approach to allow a horizontal scroll bar at some point so the content remains readable. I know we all want to avoid horizontal scroll bars but there are a few scenarios where they are appropriate and this is one of them.

Let me clarify, the scroll bar is on the table (or most likely a div wrapping the table). I’m not referring to the scroll bar for the page itself.

Good question. I’m listing sports fixtures in 3 columns with country/competition and the 2 teams, along with flag/logo for each entry . Some team names can be quite long, but readers can easily identify the country/team by its first letters or even the flag/logo alone.

I’m using the MediaWiki software and for semantic/storing reasons I need to use to html tables (I know how to do this with div tables, wraps and 100% table widths). Is there no alternative to horizontal scrolling if I want to maintain three columns? A script or alternative way to force the full width table not to be wider than its content?

Not if you want people to be able to read the content in those tables :slight_smile:

But you could collapse the table down to one column and display all of the content for each row in a column format. It will take a lot more work than using a horizontal scroll bar, but it can be done.

A Responsive Accessible Table