将最后一列的宽度设置为总父容器宽度的其余部分
我想要实现4列布局，其中前3列为动态文本（小或略大，因此不确定其宽度）。我希望第四列宽度作为前三列的宽度的其余部分。例如，如果父容器是200px，前3列内容需要120px，那么我的第4列应该自动为80px，我想在其中应用文本溢出。将最后一列的宽度设置为总父容器宽度的其余部分
我正在尝试这与表，但我卡住，并没有得到什么要做。这里是我的尝试 - JSFiddle
<div>
<table>
<tr>
<td class="shrink">Dynamic text</td>
<td class="shrink">Dynamic text</td>
<td class="shrink">Dynamic text</td>
<td class="expand">last column I should not wrap down or I should not go beyond the parent width.</td>
</tr>
</table>
</div>
我很新的CSS3 flex或CSS3 Grid但如果可以与可以轻松实现，那么我会很高兴的使用它。
UPDATE
我想柱之间的空间是5px的每个列。这将与文本内容无关。其多头或空头。此外，我不希望任何内容下降到下一行，因此我将使用white-space:nowrap。
你可以做这样的事情，与font-size属性和first-line伪元素播放。原文实际上是仍然存在，但你不能看到它... ...
table {
border: 1px solid green;
border-collapse: collapse;
width: 100%;
font-size: 12pt;
}
table td {
border: 1px solid green;
}
table td.shrink {
white-space: nowrap
}
table td.expand {
width: 100%;
font-size: 0.01em;
word-break: break-all;
position: relative;
padding-right: 100em;
}
table td.expand:first-line {
font-size: 100em;
float: left;
}
table td.expand:after {
content: "\2026";
position: absolute;
right: 0px;
top: 0px;
width: 1em;
font-size: 100em;
height: 100%;
}
div {
border: 1px solid green;
width: 500px
}<div>
<table>
<tr>
<td class="shrink">Dynamic text</td>
<td class="shrink">Dynamic text</td>
<td class="shrink">Dynamic text</td>
<td class="expand">last column I should not wrap down or I should not go beyond the parent width.</td>
</tr>
</table>
</div>
我希望这有助于你...
table {
border: 1px solid green;
border-collapse: collapse;
width:100%;
}
table td {
border: 1px solid green;
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
table td.shrink {
width: 20%;
}
table td.expand {
width: 40%;
}
div {
border: 1px solid green;
width: 500px
}<div>
<table>
<tr>
<td class="shrink">Dynamic text</td>
<td class="shrink">Dynamic text</td>
<td class="shrink">Dynamic text</td>
<td class="expand">last column I should not wrap down or I should not go beyond the parent width.</td>
</tr>
</table>
</div>谢谢您的回答，但如果我的第一列有文本'和'这是唯一3字符，所以第一列和第二列之间会有太多空间，我不想再次填写。所以这不会有帮助。 –
在我的代码中进行了编辑有一个检查 – PraveenKumar
只需将宽度设置为容器，桌子和前三栏，然后自动最后一列将承担的剩余部分容器。这是一个工作示例。我希望这是你正在寻找的。
.container {
width: 1000px;
}
.container table {
width: 100%;
}
.container table tr td {
/*border: 1px solid black;*/
}
.container table tr td.shrink {
/*width: 120px;*/
}<div class="container">
<table>
<tr>
<td class="shrink">Dynamic text</td>
<td class="shrink">Dynamic text</td>
<td class="shrink">Dynamic text</td>
<td class="expand">last column I should not wrap down or I should not go beyond the parent width.</td>
</tr>
</table>
</div>
太棒了！你能解释一下在这种情况下字体大小和第一行的行为吗？如果你把它放在你的答案中，那么对其他人也是很好的。 –
如果最后一列有小文本，那么'...'不应该出现 –