4

I searched stack overflow and looked at some solutions but nothing worked so far. What I have is a table with flexible column widths and one of the table cell has divs with some text that I want to have ellipses for overflow.

JS fiddle example here:

<table>
  <td class= 'name'>Name</td>
  <td class='desc'>
    <div>
      <div class='desc-1'>descript1:</div>
      <div class='desc-2'>really long description that I want to have ellipses for ajhdfjhdf ajhdf akjdhf asdjfh askdjfh askdjfh asdkjfh askjdfh askdjfh askjdfhaksjdhf askjfdh ajkdsfh
      </div>  
    </div>
  </td>
</table>

.name {
  width: 50%;

}
.desc {
  width: 50%;
  max-width: 100%;
}
td {
  border: 1px solid black;
}
td div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

http://jsfiddle.net/tgowurLu/

If I set the width for the .desc class to a fixed value, it works fine, like here:

.desc {
      width: 50%;
      max-width: 300px;
    }

http://jsfiddle.net/Lx71r05b/

How to get it to work for flexible grid column width (percentage value)?

Edit: The solution here helped solve my problem:

CSS: Truncate table cells, but fit as much as possible

Community
  • 1
  • 1
ski
  • 159
  • 1
  • 10
  • Here are the requirements for `text-overflow: ellipsis` to work: http://stackoverflow.com/a/33061059/3597276 – Michael Benjamin Dec 15 '15 at 17:12
  • 3
    This worked for me finally: http://stackoverflow.com/questions/5239758/css-truncate-table-cells-but-fit-as-much-as-possible – ski Dec 30 '15 at 21:00

1 Answers1

1

please use this code 

/*Please use this code in CSS*/
.responsive {width:100%;overflow:hidden;}
.table-data {width:100%;max-width:100%}

/*you can give fix width as below*/
.desc {
  width: 50%;
  max-width: 300px;
}
<!--please use this code in html:-->
<div class="responsive"><table class="table-data">
  <td class= 'name'>Name</td>
  <td class='desc'>
    <div>
      <div class='desc-1'>descript1:</div>
      <div class='desc-2'>really long description that I want to have ellipses for ajhdfjhdf ajhdf akjdhf asdjfh askdjfh askdjfh asdkjfh askjdfh askdjfh askjdfhaksjdhf askjfdh ajkdsfh
      </div>  
    </div>
  </td>
</table></div>
Yusril Maulidan Raji
  • 1,380
  • 1
  • 17
  • 39
Prajwal Shrestha
  • 509
  • 3
  • 12
  • Thanks! This seems to work but I am still facing some issues and investigating why... – ski Dec 15 '15 at 18:06
  • @ski which issues are you facing right now? please mention. – Prajwal Shrestha Dec 15 '15 at 18:22
  • This (the highest voted solution here) worked for me finally: http://stackoverflow.com/questions/5239758/css-truncate-table-cells-but-fit-as-much-as-possible – ski Dec 30 '15 at 20:57