Fixed last column of the table, remain flexible - html

Question

I need flexible lenght of first two columns when i'm entering text, but fixed lenght of third column and that table doesn't leave div element (but doesn't move the div). Third column is on right side of the div element. In the first column to fit all text entered, second how many can fit. Second column field can ends with "...". Sorry for my bad english. code - jsfiddle.net/17s8gz3L
My code:
<div>
<table border="1">
<tr>
<td>textbssanssadsadasdacccccccccccc</td>
<td>textsasas</td>
<td>text</td>
</tr>
<tr >
<td>textsadasdadadsads</td>
<td>text</td>
<td>textsasasd</td>
</tr>
</table>
<div>
table{
width:100%;
overflow:hidden;
}
td:last-of-type {
float:right;
}
td{
overflow:hidden;
white-space:nowrap;
}
div{
border:1px solid red;
width:60%;
}

Answer 1

Adding classes and styling those should do the trick.
Can't remember the exact CSS attributes but you should do something like:
In html:
<tr>
<td class='col1'></td>
<td class='col2'></td>
<td class='col3'></td>
<tr>
<tr>
<td class='col1'></td>
<td class='col2'></td>
<td class='col3'></td>
<tr>
In css:
div{
border:1px solid red;
width:60%;
}
div.col1{
width:auto;
}
div.col2{
width:auto;
}
div.col3{
width:20%;
//change the 20% to whatever static width you need use % or px, i recommend using %.
}