html table overflow hidden only for a td - html

Question

What we know is the width total of the table and the first column. The 3 and 4 column must adapt to the content, and the second column must use the rest of space. This second column must set the overflow hidden, allowing only one line or a line line
Maybe the fiddle is more clear
http://jsfiddle.net/favio41/9z867/
<table>
<colgroup>
<col class="col1" />
<col class="col2" />
<col class="col3" />
<col class="col4" />
</colgroup>
<tbody>
<tr>
<td class="date">
<span class="month monthAndYear">Feb</span>
<br/>
<span class="day ng-binding">21</span>
</td>
<td style="background-image: url(resources/img/categories/G0400.png);" class="category_icon cat_G0400">
<span class="concepto ng-binding">This is a example of text</span>
</td>
<td>
<span data-tooltip="Internet, teléfono fijo" class="cat-label cat-tooltip onlyTitle">
<span class="text ng-binding">Internet</span>
<span class="arrow"></span>
</span>
</td>
<td class="importe">
<span class="importe_value ng-binding">-33,23</span>
</td>
</tr>
<tr>
<td class="date">
<span class="month monthAndYear">Feb</span>
<br />
<span class="day ng-binding">21</span>
</td>
<td style="background-image: url(resources/img/categories/G0400.png);" class="category_icon cat_G0400">
<span class="concepto ng-binding">This is a example of text, but this is really big and we want to be hidden the last part because if is too big ...</span>
<br/>
<span class="descripcion ng-binding">This is a example of description text</span>
</td>
<td>
<span data-tooltip="Internet, teléfono fijo" class="cat-label cat-tooltip onlyTitle">
<span class="text ng-binding">Internet</span>
<span class="arrow"></span>
</span>
</td>
<td class="importe">
<span class="importe_value ng-binding">-33,23</span>
</td>
</tr>
</tbody>

Answer 1

Put a DIV in the cell you want to have overflow. Set the dimensions and overflow for the DIV, not the TD.