CODEWITHSUNDEEP
htmlcss
mTv
mTv

Reputation: 1366

How can i show the entire contents of a cell with overflow: hidden on mouse hover?

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!

Upvotes: 1

Views: 935

Answers (1)

kevin b.
kevin b.

Reputation: 1534

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)

Upvotes: 2

Related Questions