How can I truncate table cells, but fit as much as content possible?

html

responsive-design

css

table-layout

byAlex Kataev·Oct 30, 2024

For maximized content fit in table cells, with truncation gracefully handled, deploy the CSS text-overflow: ellipsis property. Control cell width by setting a max-width, and ensure overflow: hidden is combined with white-space: nowrap. This trinity ensures your cell content doesn't wrap and ellipsis appear for overspill.

td {
  max-width: 100px; /* tailor to fit */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

This snippet saves real estate by condensed display, cropping text with "..." when overflowing the cell's width.

Mastering cell width control

Using `colgroup` to allocate cell dimensions

To create a coherent and effective table layout, it's beneficial to assign space across cells explicitly. Encapsulate your table with a <colgroup> element and define each column's width with <col style="width: ...;">. This technique reserves space for each column in proportion to its content relevance.

<table>
  <colgroup>
    <col style="width: 30%;">
    <col style="width: 70%;">
  </colgroup>
  <!-- Your rows aren't homeless now -->
</table>

Balancing out overflow with cell width content

You'll need to mediate the relationship between cell width and content to ensure optimal viewing experience. You can tune the max-width or min-width on your table cells for a balanced overflow/display ratio. If you want the overflow potential to be uniform across cells, apply max-width: 0 alongside a table-layout: fixed.

table {
  width: 100%;
  table-layout: fixed; /* table's not flexing anymore */
}
td {
  max-width: 0;
}

CSS Flexibility is your friend

Flex your CSS muscles and try different property combos to create a solution that moulds to your layout. Whether you use position: relative or experiment with absolutely-positioned inner elements, this can give you a higher degree of content visibility control.

Effective solution for varying content volumes

Test with multiple content lengths

It's vital to verify your solution's robustness with differing content lengths. Simulate scenarios with varying data lengths to see if your CSS truncation executes as expected.

Ensuring accessibility with `title` attribute

Make certain your table cells are accessible. When content gets truncated it could impact comprehension, hence using title attributes is a good practice to provide full text on hover.

<td title="All your precious content here">Not so much to see</td>

Building a responsive table layout

Creating responsive tables is fundamental in modern web design. Wrapping your table in a div with overflow-x: auto, will allow horizontal scrolling when needed, ensuring column visibility irrespective of the viewport size.

<div style="overflow-x: auto;">
  <table>
    <!-- All rows report to their respective cols -->
  </table>
</div>

explain-codes / Html / How can I truncate table cells, but fit as much as content possible?

Linked

Setting fixed width for HTML table columns regardless of cell content size



Equal sized table cells to fill the entire width of the containing table



Fixed Table Cell Width



How to force table cell `` content to wrap?



Why does overflow:hidden not work in a ``?



Td widths, not working?



100% width table overflowing div container



Mastering cell width control Effective solution for varying content volumes