Text overflow ellipsis does not work for div inside flexible width table cell

Question

I looked for a stack overflow and looked at some solutions, but so far nothing has worked. I have a table with flexible column widths, and one of the table cells has divs with some text, which I want to have ellipses for overflowing.

An example JS script is 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 class .descto a fixed value, it works fine, like here:

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

http://jsfiddle.net/Lx71r05b/

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

Edit: The solution helped solve my problem:

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

Answer 1

/*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>

Hide result