使用Last Column Filling Remainder使表宽度为100%,而不压缩其他列的内容/宽度

Question

是否有可能使表(具有动态创建的文本)具有例如:

表格宽度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",因为如果有足够的文本,我希望文本包装.

编辑:"我只是喜欢[前四]列,如果我从表格标签中删除宽度属性,它们将是宽度.但仍然有表格的100%宽度."

有任何想法吗？CSS解决方案更好!

Answer 1

您可以使用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 在此记录,解决方法(来自上面的帖子)是:

通过向项添加非内联显示值可以避免此问题,例如块,内联块,弹性等.

顺便说一句:以下是不使用flexbox的上述相同的小提琴- 请注意,最后一个td实际上并没有填满剩余的空间,而是占用了它自己的自然空间 - 这是OP不想要的.

Answer 2

只需添加

table-layout: fixed; 

到你的桌子,你就完成了.

假设您在其他列中的文本不强制表格大于100%,则您的最后一列将始终拉伸,因此无需在<td>上应用任何宽度.

Answer 3

这对我有用（在 FireFox、Chrome 和旧的 12.x Opera 中）。我想要 100% 宽度的表格和填充其余部分的最后一列有类tableList，这里是 CSS：

.tableList { width: 100%; }
.tableList td { width: 1px; } /* min width, actually: this causes the width to fit the content */
.tableList td:last-child { width: 100%; } /* well, it's less than 100% in the end, but this still works for me */

下面，有一个片段可以尝试：

.tableList { width: 100%; }
.tableList td { width: 1px; } /* min width, actually: this causes the width to fit the content */
.tableList td:last-child { width: 100%; } /* well, it's less than 100% in the end, but this still works for me */

.tableList { width: 100%; }
.tableList td { width: 1px; } /* min width, actually: this causes the width to fit the content */
.tableList td:last-child { width: 100%; background-color: yellow; } /* well, it's less than 100% in the end, but this still works for me */

就像 Rahat 注意到的那样，如果除第一列之外的列的内容超过一个单词，则它变为多行（每个单词一行）：

<table class="tableList">
  <tr><td>game's</td><td>not</td><td>over</td></tr>
  <tr><td>one</td><td>two</td><td>three and more</td></tr>
</table>

.tableList { width: 100%; }
.tableList td { width: 1px; } /* min width, actually: this causes the width to fit the content */
.tableList td:last-child { width: 100%; background-color: yellow; } /* well, it's less than 100% in the end, but this still works for me */

但他也提出了一种解决方法 - 添加white-space: nowrap：

<table class="tableList">
  <tr><td>game's</td><td>not</td><td>over</td></tr>
  <tr><td>one</td><td>two plus plus</td><td>three and more</td></tr>
</table>

.tableList { width: 100%; }
.tableList td { width: 1px; white-space: nowrap; } /* min width, actually: this causes the width to fit the content */
.tableList td:last-child { width: 100%; background-color: yellow; } /* well, it's less than 100% in the end, but this still works for me */

Answer 4

听起来您希望浏览器“智能”地确定每列的宽度。您希望列能够换行，但又不希望它们的宽度太小。问题是，当完全由浏览器决定时，浏览器可以任意选择每列的宽度。10像素？100像素？当然，如果您不向浏览器提供任何提示，则两者都有效。

您可以尝试使用min-width和max-width作为折衷方案，使列宽度动态但在一定范围内。

如果列可能非常窄（例如，如果该列中的数据由单位数字组成），那么仅使用 max-width 可能是首选。