Html & Css Table 单元格宽度问题如何始终在右侧显示图标？

Question

我有一个 Table 和 3 Table-Cells。第一个应该代表个人资料图片，第二个应该代表标题（文本），第三个应该代表一个带有旗帜图标的按钮。

应该如何：

目前情况如何：

如您所见，中间的单元格会自动调整其宽度。这就是问题所在，因为无论中间的文本有多长，它都应该始终 fit/fill 在屏幕上。左边和右边的应该总是有相同的固定宽度。

我已经尝试过的：

<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 = ['[=11=].9 + $.1', ' + ', ' + [=11=].5', '[=11=] + [=11=].01', '0 + ', ' + ', ' + [=11=].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>

Html & Css Table 单元格宽度问题如何始终在右侧显示图标？

Html & Css Table Cell Width Issue how to show Icon always on the right side?

html

css

css-tables