固定表格的最后一列，保持靈活

Question

輸入文本時，我需要前兩列的長度靈活，但是第三列的固定長度和該表不會離開div元素（但不會移動div）。 第三列在div元素的右側。 在第一列以適合所有輸入的文本，第二列可以容納多少文本。 第二列字段可以以“ ...”結尾。 對不起，我的英語不好。 代碼-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屬性，但您應該執行以下操作：

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

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