I have a list of 8 key/value pairs I'm displaying in a sidebar using a table element. I'm using a th and td element on each row. However, the td content is often too long and has to be truncated. I could increase the width of the sidebar but the td content is of variable length and also, that won't work so well on mobile devices.

How else could I display key/value pairs in a way that:

  • is more suitable for fluid widths
  • can display "values" of any length without breaking the layout

2 Answers 2


Agree with Schroedingers Cat, no easy answer, and it will depend a lot on what exactly you are trying to do. But if the values are that long, it looks more to me like a title/paragraph situation rather than a key/value pair. Maybe it's worth experimenting with a definition list (dl/dt/dd) approach? With a bit of javascript you can change the css floats according to window size and text size, so that it mimics a table or a heading/section layout, i.e.

Wide-enough page:

key | this value is a really long one, but so long you've never seen one -- lorem ipsum dolores sit amet

Narrow page:

this value is an even longer one, but so long you'll never see one like this again -- lorem ipsum dolores sit amet. It even wraps around -- hi there!


It is difficult, and there is no simple answer to it. Putting an abbreviated version in the text, and using mouseover/tooltips to show the entire text is the common approach.

However, there is also the question of whether you NEED to have unlimited length entries, and whether you could put a restriction on them. If they are just references, you shouldn't have long text in them. Of course, it depends on your application, but solving a problem at source is better than solving it later.

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.