Question

I have a table which is being dynamically populated from MySQL. The table has been applied with the following CSS

.table th,
.table td {
  padding: 8px;
  line-height: 18px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid #dddddd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

I also have a defined width:

<td style="width: 100px">Some Stationers &amp; Printers , Yamunanagar</td>

I want that this to look like Some Stationers & Pr...
I don’t know what i am doing wrong here, any suggestions will be appreciated!

Browsers that this has been test on are Safari and Chrome, so just webkit!

Answer 1

Demo

.table th,  
.table td {
  background:#eee;
  padding: 8px;
  line-height: 18px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid #dddddd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  float:left;        // added
}