テーブルの最後の列が固定されたまま固定されています

Question

テキストを入力しているのに3番目の列の長さが固定されていて、そのテーブルがdiv要素を残さない（ただしdivを移動しません。 ）。第3列はdiv要素の右側にあります。最初の列には、入力されたすべてのテキストを収めるために、2番目の列に収まる数を入力します。 2番目の列のフィールドは "..."で終わることができます。私の悪い英語のために申し訳ありません。コード - jsfiddle.net/17s8gz3L マイコード：

<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

クラスを追加し、トリックを行う必要があり、それらをスタイリング。 は、正確なCSS属性を覚えてすることはできませんが、やるべきもののように：

<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> 

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

HTMLで