テーブルセルで省略記号が機能しない

Question

最初のセルには省略記号を適用する必要があります（最初のセルは残りのスペースを埋める必要があります）が、テーブルは親divの外になります。どうすればそれを動作させることができますか？

.wrapper { 
 
    width:200px; 
 
    background: wheat; 
 
} 
 

 
.el-cell { 
 
    width:99%; 
 
    display: block; 
 
} 
 
.table { 
 
    width: 100%; 
 
} 
 

 
.no-wrap { 
 
    white-space: nowrap; 
 
} 
 

 
.el { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
}

<div class="wrapper"> 
 
    <table class="table"> 
 
    <tr> 
 
     <td class="el-cell"> 
 
     <div class="el"> 
 
      <span>first cell should ellipsis aaaaaaa bbbb ccccccc</span> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <span class="no-wrap">2nd cell</span> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div>

Answer 1

属性top: 0とleft: 0

.wrapper { 
 
    width:200px; 
 
    background: wheat; 
 
} 
 

 
.el-cell { 
 
    width:99%; 
 
    position: relative; 
 
} 
 

 
.el span{ 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
}

<div class="wrapper"> 
 
    <table class="table"> 
 
    <tr> 
 
     <td class="el-cell"> 
 
     <div class="el"> 
 
      <span>first cell should ellipsis aaaaaaa bbbb ccccccc</span> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <span class="no-wrap">2nd cell</span> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div>

Answer 2

だけtable-layout: fixedを追加します。