1

I have table that sometimes have long strings as values. How can i show the entire content of a tablecell if the overflowing content his hidden?

I'm thinking the cell should be expand while overlapping adjacent cells without displacing them.

Currently im using this css:

table{
  table-layout: fixed;
  margin-top: 24px;

  th{
    white-space: normal;
    word-wrap: break-word;
  }

  td{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  td:hover{
    overflow: visible;
    z-index: 1;
    background-color: grey;
  }
}

This does make the overflowing text visible and overlapping adjacent cells. But the background/cell wont follow.

Thanks!

mTv
  • 1,074
  • 17
  • 28
  • Something like this? http://stackoverflow.com/questions/31669939/clip-long-text-inside-html-table-cells-show-entire-content-on-hover – adprocas Apr 05 '17 at 12:25
  • Yes I'v taken a look at that one. Its something like what i want but i couldn't make it work. The table cells don't expand with the text. – mTv Apr 05 '17 at 12:34
  • 1
    What about tooltip? I think you're going to have some issues with your approach without using JS. – adprocas Apr 05 '17 at 15:49
  • Yes im starting to lean towards bootstrap tooltip/popover/modal. I think some of the strings in the cells are up to 400 characters long(description column). Simply expanding a tablecell wouldn't be the best option then I'm assuming. – mTv Apr 06 '17 at 08:26
  • Probably not. Maybe designing the page differently? I'm not a designer, but I've seen quite clever ways of using design to display large amounts of information. – adprocas Apr 06 '17 at 12:04
  • Do you have any examples? Would be much appreciated. – mTv Apr 06 '17 at 12:07
  • 1
    I don't really know what your page looks like - how many columns and such. Just google some ideas. You could have an accordion or something that displays more from the table. Here are some ideas (I googled "modern webpage designs for large data") - https://www.noupe.com/design/data-tables-in-modern-web-design.html – adprocas Apr 06 '17 at 13:39
  • 1
    heres more - http://www.jankoatwarpspeed.com/ultimate-guide-to-table-ui-patterns/ – adprocas Apr 06 '17 at 13:41
  • 1
    Update: I ended up using a bootstrap modal dialog. When a row is clicked, it shows all(full) values for that row in the modal dialog. Thanks a lot for your help though. – mTv Apr 10 '17 at 08:51

1 Answers1

2

This is what I got for your situation: jsFiddle

First of all, I changed the css so that the table selector does not contain the other selectors. (note that this is not needed if you are using SASS or LESS as pointed out in the comments)

table{
  table-layout: fixed;
  margin-top: 24px;
} <--- place it here instead of at the end of the css rules for the table

th{
  white-space: normal;
  word-wrap: break-word;
}

And then I also adjusted the css rules for 'td' and 'td:hover':

td{
  max-width : 50px; 
  white-space : nowrap;
  overflow : hidden;
}

td:hover{
  overflow: visible;
  z-index: 2;
  background-color: grey;
  max-width:initial;
}

Hope this is what you wanted to achieve.

EDIT

After some comments and knowing you don't want the adjacent cells to move, I found this jsFiddle

(this one is still a bit jumpy on hover, so maybe someone else knows how to fix this; I don't see how to solve that right now)

kevin b.
  • 1,494
  • 1
  • 13
  • 23
  • Why did you change the location of the end brace? If he's using SASS or LESS or something this should be fine, and is recommended. – adprocas Apr 05 '17 at 13:04
  • Also, it is not recommended to use "initial" - IE doesn't support it - https://www.w3.org/TR/css3-cascade/#initial – adprocas Apr 05 '17 at 13:07
  • And this - https://msdn.microsoft.com/en-us/library/hh781508(v=vs.85).aspx#keywords – adprocas Apr 05 '17 at 13:07
  • Hm, my cells are still not expanding. Could it be because i have my table inside a bootstrap col div `
    `? Also, I don't want the table to expand or adjacent cells to move.
     – mTv Apr 05 '17 at 13:07
  • totally correct, I was aware of that. The reason I changed that, was because I assumed that he wasn't using one of those because he didn't mention something about it (not in post, not in tags) and because i couldn't see any other reason than the misplaced curly bracket. That's why I changed it, sorry for not mentioning/explaining. – kevin b. Apr 05 '17 at 13:10