Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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
share|improve this question
    
please post your question on stackoverflow.com, and i will answer it there. –  Emil Oct 1 '11 at 19:43
add comment

2 Answers

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.

share|improve this answer
add comment

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:

key
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!

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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