Table with text ellipsis

Make sure div inside td should have ellipsis styles. should not apply for td. If you want make to td then you have to add td as disply inline-block element. It will work in all browsers

by Rayudu Ikkurthi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.js"></script>
<table class="table">
<tr>
  <td><div>
  
  </div></td>
  <td><div>
  
  </div></td>
  <td><div>
  
  </div></td>
  <td><div>
  
  </div></td>
</tr>
<tr>
  <td><div>
  Hello sample text hereHello sample text here Hello sample text here
  </div></td>
  <td><div>
  Hello sample text hereHello sample text here Hello sample text here
  </div></td>
  <td><div>
  Hello sample text hereHello sample text here Hello sample text here
  </div></td>
  <td><div>
  Hello sample text hereHello sample text here Hello sample text here
  </div></td>
</tr>
<tr>
  <td><div>
  
  </div></td>
  <td><div>
  
  </div></td>
  <td><div>
 
  </div></td>
  <td><div>
  
  </div></td>
</tr>
<tr>
  <td><div>
  Hello sample text hereHello sample text here Hello sample text here
  </div></td>
  <td><div>
  Hello sample text hereHello sample text here Hello sample text here
  </div></td>
  <td><div>
  Hello sample text hereHello sample text here Hello sample text here
  </div></td>
  <td><div>
  Hello sample text hereHello sample text here Hello sample text here
  </div></td>
</tr>
</table>

CSS

table{
  table-layout:fixed;
  width:100%;
  border-spacing: 0;
border-collapse: collapse;
}
td{
  padding:10px;
  border-bottom:1px solid #b7b7b7;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
div{
  width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

JavaScript

$(document).ready(function(){
$('.table tr:first-child td div').html('Hello sample val;labha hereHello sample text here Hello sample text here');
$('.table tr:nth-child(3) td div').html('Hello sample Vallabha hereHelloHello sample text hereHello sample sample text here Hello sample text here');
});