Html＆Css Tableセル幅アイコンを常に右側に表示する方法を教えてください。

Question

私は3つのテーブルセルを持つテーブルを持っています。 最初のものはプロフィール画像を表し、2番目のものはタイトル（テキスト）を表し、3番目のものはフラグアイコンを含むボタンを表します。

はそれがあるべき方法：

それが現時点でどのように

：あなたが見ることができるように

は中央のセルが自動的にその幅のサイズを変更します。 途中のテキストがどれくらい長くても画面に常にフィットする必要があるため、この問題が発生します。左と右のものは常に同じ固定幅でなければなりません。

<div class="table"> 
<div class="tablecellleft"> 
    ........here is the img 
</div> 
<div class="tablecellmiddle"> 
    ..... here is the text 
<div> 
<div class="tablecellright"> 
...... button with icon 
</div> 
</div> 

CSS：

私はすでに試してみました何

.table{ 
display: table; 
} 
.tablecellleft{ 
display: table-cell; 
min-width: 17vw; 
max-width: 17vw; 
} 
.tablecellmiddle{ 
display: table-cell; 
vertical-align: top; 
//No width because it should fill 
} 
.tablecellright{ 
display: table-cell; 
min-width: 17vw; 
max-width: 17vw; 
} 

Answer 1

使用calcを、あなたは100％で、左と右のセクションに与えられている幅何を引きます。

width: calc(100% - 34vw); 

var fees = ['$0.9 + $.1', '$20 + $2', '$5 + $0.5', '$0 + $0.01', '$100 + $9', '$1 + $1', '$2 + $0.5'];

.table{ 
 
display: table; 
 
width: 100%; 
 
} 
 
.tablecellleft{ 
 
display: table-cell; 
 
width: 17vw; 
 
} 
 
.tablecellmiddle{ 
 
display: table-cell; 
 
vertical-align: top; 
 
width: calc(100% - 34vw); 
 
//No width because it should fill 
 
} 
 
.tablecellright{ 
 
display: table-cell; 
 
width: 17vw; 
 
text-align: right; 
 
}

<div class="table"> 
 
<div class="tablecellleft"> 
 
    ........here is the img 
 
</div> 
 
<div class="tablecellmiddle"> 
 
    ..... here is the text 
 
</div> 
 
<div class="tablecellright"> 
 
...... button with icon 
 
</div> 
 
</div>