Fixed letzte Spalte der Tabelle, bleiben flexibel

Question

Ich brauche flexible Länge der ersten zwei Spalten, wenn ich Text eingeben, aber feste Länge der dritten Spalte und diese Tabelle nicht verlassen Div-Element (aber bewegt sich nicht die div). Die dritte Spalte befindet sich auf der rechten Seite des div-Elements. In die erste Spalte passen alle eingegebenen Texte, zweitens wie viele passen. Das Feld für die zweite Spalte kann mit "..." enden. Entschuldigung für mein schlechtes Englisch. Code - jsfiddle.net/17s8gz3L Mein 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

Klassen Hinzufügen und diejenigen Styling sollte es tun. Kann nicht genau die CSS-Attribute erinnern, aber Sie sollten so etwas wie tun:

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 %. 
}