有可能使一个表(它将动态创建文本)具有例如：
桌面宽度为屏幕的100％
5列
最后一列为空()
前四列有文字,宽度是动态的
最后一列是宽度的其余部分
没有压缩前四列的文本
我有这个到目前为止,它压缩文本,这是我想避免的：
<table style="width:100%;" border="1">
<tr>
<td>One Two Three</td>
<td>Two Three Four</td>
<td>Three Four Five</td>
<td>Four Five Six</td>
<td style="width:100%;"> </td>
</tr>
</table>
我不能使用“white-space：nowrap”,因为如果有足够的文本,我想要文本包装.
编辑：“如果我从表格标签中删除了width属性,那么我就像[前四个]列的宽度是宽度,但仍然有这个表格是页面宽度的100％.
有任何想法吗？ CSS解决方案比较好！
解决方法
您可以使用
flexbox来完成此操作
CSS
table {
width:100%;
border: 1px solid black;
border-collapse: collapse;
}
td + td {
border-left: 1px solid black;
}
tr {
display: flex;
align-items: stretch;
}
td:last-child {
flex: 1;
background: yellow;
display:inline-block;
/* to keep IE happy */
}
FIDDLE(调整浏览器窗口的大小可以看到这一点)
table {
width: 100%;
border: 1px solid black;
border-collapse: collapse;
}
td + td {
border-left: 1px solid black;
}
td:last-child {
background: yellow;
}
<table>
<tr>
<td>One Two Three</td>
<td>Two Three Four</td>
<td>Three Four FiveThree Four FiveThree Four FiveThree Four FiveThree Four Five</td>
<td>Four Five Six</td>
<td> f</td>
</tr>
</table>
注意：
IE 10-11有一个问题,即Inline元素(并且显然是表格单元格)也不会被视为flex-items.
这个问题由Phillip Walton here记录,解决方法(从上述帖子)是：
This issue can be avoided by adding a non-inline display value to the
items,e.g. block,inline-block,flex,etc.
Btw：以下是与without using flexbox相同的小提琴 – 请注意,最后一个td实际上并不填满剩余空间,而是占用它自己的自然空间 – 这是OP不想要的.
