You cannot reliably combine truly content-driven table sizing with ellipsis truncation: automatic layout lets cell content influence column width, while an ellipsis appears only when text overflows a constrained box. For predictable clipping, constrain the table and use fixed layout. If the table must remain auto-width, a CSS Grid workaround has been suggested, but it is experimental and needs testing for alignment, borders, browser behavior, and accessibility.
Why auto-width tables do not naturally truncate content
In an automatically laid-out table, content helps determine the table and column sizes. If a long cell makes its column wider, the text may not overflow at all, leaving text-overflow: ellipsis nothing to indicate.
An ellipsis does not cause overflow. It signals that inline content has been clipped. The usual combination is overflow: hidden, white-space: nowrap, and text-overflow: ellipsis on a box with a constrained width. MDN documents these prerequisites in its text-overflow reference.
CSS 2.2 describes automatic table layout as content-driven, while noting that browsers are not required to use that exact algorithm. So a particular auto-layout result should not be treated as a universal cross-browser guarantee. See the CSS 2.2 table layout specification.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsChoose which requirement can bend
| Approach | What it offers | Tradeoff |
|---|---|---|
| Fixed table layout with an explicit width | Bounded columns and predictable truncation | Requires a table-width constraint; content may not fit |
CSS Grid and display: contents adaptation |
A proposed route toward an auto-sized visual result | Browser behavior, table-header alignment, borders, and accessibility need testing |
| Automatic table layout | Ordinary content-driven sizing | Long content can expand columns, preventing overflow and ellipsis |
There is no established option in the cited material that guarantees all four goals at once: semantic table behavior, content-driven sizing, consistent browser rendering, and reliable header/body alignment with borders.
Documented route: constrain the table, then clip cell text
MDN’s standard approach is to use a specified table width with table-layout: fixed, then put the overflow rules on the cell whose content should be clipped. The table needs a width constraint for fixed layout to provide predictable column sizing. Automatic layout can still expand to accommodate content despite a specified width, as described in MDN’s table-layout reference.
table {
width: 100%;
table-layout: fixed;
}
td {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}This example uses width: 100% as a clear constraint, but it does not satisfy a requirement to avoid fixed or full-width table sizing. Choose a width that matches the layout you actually want; the key is that the table is bounded. If you need specific column proportions, define them explicitly, for example with a <colgroup>, and check that the resulting width leaves enough room for useful content.
Auto-width workaround: treat the grid suggestion as experimental
A SitePoint Forums respondent suggested changing the table presentation to CSS Grid and using display: contents to pursue the desired auto-sized appearance. The discussion does not provide a verified, complete recipe. In particular, the response to the original poster’s question about keeping MediaWiki-generated <thead> headers aligned with <td> columns was explicitly described as untested. The thread’s original poster later reported that border-collapse did not work with the grid approach and that they used individual border widths instead. These are reports from that thread, not guarantees about every implementation. The discussion is in the SitePoint Forums topic, posted November 3, 2021, with replies through November 8, 2021.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Rank #3
There is a broader caution beyond the thread: MDN warns that changing a table’s display type or using display: contents can affect accessibility-tree exposure in some implementations. See the MDN display reference. Preserve semantic table markup and test what assistive technology actually receives rather than assuming the visual grid remains an accessible table.
What to test before using it
- Inspect the exact markup your platform renders, including
<thead>,<tbody>, header cells, and data cells. - Check header-to-body column alignment at narrow and wide viewport sizes.
- Test every browser you support, including Safari and iOS as specifically raised in the forum discussion.
- Check screen-reader navigation and whether headers remain associated with their data cells.
- Verify borders and spacing; the thread reports a border-collapse problem with its grid approach.
Do not treat a CSS Grid adaptation as a drop-in fix unless it passes those checks in your own rendered table.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.If a horizontal scroll wrapper is acceptable
A horizontally scrollable wrapper can preserve a table’s natural content sizing while allowing readers to reach columns wider than the viewport. It is a common responsive-table compromise, but it does not meet the original requirement to avoid a fixed-width container. Use it only if that constraint can be relaxed.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
