テーブル：幅に合わせて列を展開しますが、行の高さは単一行にします

Question

テーブルのコンテナの幅を塗りつぶします。 3つの列があります。 2つの列は固定幅を持ち、3つ目の列は残りの幅を埋めるように展開する必要があります。テーブルの幅は動的です。

行の高さが拡大する可能性がある場合には、これを動作させることができますが、各行には1行のテキストのみが必要です。テキストが長すぎる場合は、切り捨てる必要があります。

コード+例：（https://jsfiddle.net/o044tq53/5/）

EDIT：私は上記の説明を書き直し、それがどのように見えるかを示す例でjsfiddleを更新しました。

#wrapper { 
 
    width:200px; 
 
    background:white; 
 
} 
 
table { 
 
    border-collapse:collapse; 
 
    text-align: left; 
 
    width:100%; 
 
    margin-bottom:30px; 
 
} 
 
div { 
 
    overflow:hidden; 
 
    white-space: nowrap; 
 
    text-align:left; 
 
} 
 
.td_col_two { 
 
    width:100%; 
 
} 
 
.col_one_div { 
 
    width:90px; 
 
    background: red; 
 
} 
 
.col_two_div { 
 
    background: lightblue; 
 
    overflow:hidden; 
 
} 
 
.col_three_div { 
 
    width:20px; 
 
    background: lightgreen; 
 
}

<table border="0" cellpadding="0" cellspacing="0"> 
 
    <tr> 
 
    <td> 
 
     <div class = "col_one_div"> 
 
     Robin 
 
     </div> 
 
    </td> 
 
    <td class = "td_col_two"> 
 
     <div class = "col_two_div"> 
 
     nowrap does not work for long text. 
 
     </div> 
 
    </td> 
 
    <td> 
 
     <div class = "col_three_div"> 
 
     x 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 1

は、ディスプレイの使用を検討してください希望を：（1フレックス成長）

チェックこのスニペット

#wrapper { 
 

 
    background: white; 
 
    display: flex; 
 
    flex-direction: column; 
 
    border:1px solid black; 
 
} 
 

 
#wrapper table { 
 
    flex: 1; 
 
    width: 100%; 
 
} 
 

 
table, 
 
tr, 
 
td { 
 
    border: 1px solid; 
 
    
 
} 
 

 
#table-two div { 
 
word-wrap:break-all; 
 
} 
 

 
.td_col_two { 
 
    width: 100%; 
 
} 
 

 
.col_one_div { 
 
    background: red; 
 
} 
 

 
.col_two_div { 
 
    background: lightblue; 
 

 

 
} 
 

 
.col_three_div { 
 
    width: 20px; 
 
    background: lightgreen; 
 
}

<div id="wrapper"> 
 
    <table id="table-one"> 
 
    <tr> 
 
     <td> 
 
     <div class="col_one_div"> 
 
      Robin 
 
     </div> 
 
     </td> 
 
     <td class="td_col_two"> 
 
     <div class="col_two_div"> 
 
      Short works 
 
     </div> 
 
     </td> 
 

 
     <td> 
 
     <div class="col_three_div"> 
 
      x 
 
     </div> 
 
     </td> 
 

 
    </tr> 
 

 
    </table> 
 

 

 
    <table id="table-two"> 
 
    <tr> 
 
     <td> 
 
     <div class="col_one_div"> 
 
      Robin 
 
     </div> 
 
     </td> 
 
     <td class="td_col_two"> 
 
     <div class="col_two_div"> 
 
      White-space normal also works. 
 
     </div> 
 
     </td> 
 

 
     <td> 
 
     <div class="col_three_div"> 
 
      x 
 
     </div> 
 
     </td> 
 

 
    </tr> 
 

 
    </table> 
 

 
    <table id="table-three"> 
 
    <tr> 
 
     <td> 
 
     <div class="col_one_div"> 
 
      Robin 
 
     </div> 
 
     </td> 
 
     <td class="td_col_two"> 
 
     <div class="col_two_div"> 
 
      nowrap does not work for long text. 
 
     </div> 
 
     </td> 
 

 
     <td> 
 
     <div class="col_three_div"> 
 
      x 
 
     </div> 
 
     </td> 
 

 
    </tr> 
 

 
    </table> 
 

 
</div>

：フレックスとフレックス1これは役に立ちます