divの長い親

Question

よりも、私は1行のテーブルセルとそれが収まらない場合は省略し、最後の1で3つのdivたい： https://jsfiddle.net/prwrjy6r/1/

<table> 
<tr> 
    <td id="tablecell"> 
    <div id="asd"> 
     test 
    </div> 
    <div id="qwe"> 
     1234123 
    </div> 
    <div id="yxc"> 
     long text this is 
    </div> 
    </td> 
</tr> 
</table> 

#asd { 
    width: 4em; 
    display: table-cell; 
} 
#qwe { 
    width: 4em; 
    display: table-cell; 
} 
#yxc { 
    display: table-cell; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 

#tablecell { 
    width: 10em; 
    border: solid; 
} 

テーブルセルのサイズは50％にする必要がありますが、これを試してみると、最後のdivはセル全体のサイズを拡大します。

Answer 1

これはあなたがやろうとしていることですか？

.asd { 
 
    width: 3em; 
 
    float: left; 
 
} 
 

 
.qwe { 
 
    width: 5em; 
 
    float: left; 
 
} 
 

 
.yxc { 
 
    width: 2em; 
 
    float: left; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 

 
#tablecell { 
 
    width: 10em; 
 
    border: solid; 
 
    white-space: nowrap; 
 
} 
 

 
#tablecell:after { 
 
    content: ''; 
 
    clear: both; 
 
    display: block; 
 
}

<table> 
 
    <tr> 
 
    <td id="tablecell"> 
 
     <div class="asd"> 
 
     test 
 
     </div> 
 
     <div class="qwe"> 
 
     1234123 
 
     </div> 
 
     <div class="yxc"> 
 
     long text this is hellow 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>