html – 使表格宽度为100％,最后一列填充余数,而不挤压其他列的内容/宽度

有可能使一个表(它将动态创建文本)具有例如：

桌面宽度为屏幕的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%;">&nbsp;</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>&nbsp;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不想要的.

原文地址：https://www.jb51.cc/html/230140.html