I'm working on a project using Google's Material Design and am running into an issue where we need to truncate table cell content. There is a spec for truncating table headers and showing the full label on hover, but nothing about table content. The content I'm looking to truncate is not primary for the user (field for comments about entry), but they may want to see it.

  • Is truncating and showing cell content an acceptable pattern?
  • If so, should the entire row expand down, or just the cell expand over other content?

Note: this user is a support user who will be on a desktop.

  • 1
    Can you provide a mock?
    – noadavi
    Feb 2, 2017 at 23:37

3 Answers 3


As you have mentioned that the scanability is important, I think we would need a table along with truncation. However, as rightly mentioned by you, truncation on tables isn't really used that much. Here's the issue with the two approaches you mentioned

Expanding the cell

The biggest challenge with truncation on tables is that the data is in a way fragmented. Each cell is technically a key-value paired data, the key being in the header and the value in the cell below. Truncating both would mean that the user would need to hover on the header first, memorize the header text and then hover on the concerned cell itself to see the value for that particular cell. This would not be a very convenient solution, moreover in some cases, the user might need more focus to hover on the right cell, doing this with the header text in mind would make it even more tedious.

Expanding the entire row

Depending on the content in the entire table, this can cause a lot of disturbance to the overall layout. Also, it still breaks the link between the header and content in the cell, forcing the user to have more eye movement and cognition to understand the data.

With these two challenges, the only solution I can think of is to show both, header and value at a cell level. Something like below (it's a really quick sketch, please ignore the typos in there)

enter image description here

This way the overall layout stays intact while the user can access the data with least effort too.


There are 2 parts to answer this. One of them is truncation, and not only is perfectly feasible, but you can see the guidelines at Material Design Data Formats: Redaction and Truncation

However, you might have situations where table contents are too big. In that case, there's a chance tables aren't your best option, and you might need to use Expansion Panels.

Always remember that, unless you're 100% sure people will see only on desktops, you have to assume a big part of your audience will see your project on a mobile, so try to draw some ideas on paper and prototype if your elements are the most adequate for your desired user flow

  • I understand truncation is an acceptable pattern, but haven't seen it used within a table cell. I want to avoid expansion panels because the large cell will be an infrequent exception, definitely not the rule. The scanability of tables is important for this user. This user is a support user who will be on desktop 99.9% of the time.
    – Chris
    Oct 5, 2016 at 20:28

Yes, I'd use truncating the content.

I would avoid resizing the table itself (neither increase row height nor widen the column) as it creates changes of the complete layout which distract the user. Expanding a cell over the other content is a good solution (balloon-ish), provided that it only happens on hover.

Also, make sure that the balloon fits within the screen bounds, e.g. if you have the right-most cell that has its content truncated, the balloon's right edge should not hang over the right edge of the table.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.