Html 使用最后一列填充剩余部分使表格宽度为 100%，而不挤压其他列的内容/宽度

Make Table Width 100% with Last Column Filling Remainder without squashing other columns content/width

提问by txchou

Is it possible to make a table (which will have dynamically created text) to have for example:

是否可以制作一个表格（其中包含动态创建的文本），例如：

table width 100% of the screen 5 columns last column is empty ( ) the first four columns have text and their width is dynamic the last column is remainder of the width without squashing the text in the first four columns

表格宽度 100% 屏幕 5 列 最后一列是空的 ( ) 前四列有文本并且它们的宽度是动态的 最后一列是宽度的剩余部分，而不挤压前四列中的文本

I have this so far and it squashes the text which is what I'm trying to avoid:

到目前为止，我已经有了这个，它压缩了我试图避免的文本：

<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>

I can't use "white-space: nowrap" as I do want the text to wrap if there's enough text.

我不能使用“空白：nowrap”，因为如果有足够的文本，我确实希望文本换行。

Edit: "I'd just like the [first four] columns to be the width they would be if I removed the width attribute from the table tag. But still have the table be 100% of the width of the page."

编辑：“如果我从 table 标记中删除 width 属性，我只是希望 [前四] 列是它们的宽度。但仍然让表格是页面宽度的 100%。”

Any ideas? CSS solutions preferable!

有任何想法吗？CSS 解决方案更可取！

回答by Danield

You can use flexboxto accomplish this

您可以使用flexbox来完成此操作

CSS

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(Resize the browser window to see this in action)

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>

NB:

注意：

IE 10-11 has an issue that Inline elements (and apparently table-cells as well) are not treated as flex-items.

IE 10-11 有一个问题，即内联元素（显然还有表格单元格）不被视为弹性项目。

This issue is documented by Phillip Walton hereand the workaround (from the above post) is:

Phillip Walton在这里记录了这个问题，解决方法（来自上面的帖子）是：

This issue can be avoided by adding a non-inline display value to the items, e.g. block, inline-block, flex, etc.

可以通过向项目添加非内联显示值来避免此问题，例如块、内联块、flex 等。

---

---

Btw:顺便说一句：以下是上面相同的小提琴的样子without using flexbox不使用 flexbox- 请注意，最后一个tdtd实际上并没有填满剩余的空间，而是占用了它自己的自然空间 - 这是 OP 不想要的。

回答by connexo

Just add

只需添加

table-layout: fixed; 

to your table, and you're done.

到你的桌子上，你就完成了。

Assuming your texts in the other columns do not force a table wider than 100%, your last column will always stretch, so not necessary to apply any widths on the <td>.

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

回答by YakovL

This is what worked for me (in FireFox, Chrome and old 12.x Opera). My tables which I wanted to have 100% width and the last column to fill the rest has the class tableListand here's CSS:

这对我有用（在 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 */

Below, there's a snippet to try:

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

.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 */

<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>

Like Rahat has noticed, if the content of a column other than the first one is more than one word, it becomes multiline (one line per word):

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

.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 */

<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>

but he also has suggested a workaround – adding white-space: nowrap:

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

.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 */

<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>

回答by Loic Lacomme

I solved the same issue by using max-width=99% for the last column and gave fixed sizes to the other columns.

我通过对最后一列使用 max-width=99% 解决了同样的问题，并为其他列提供了固定大小。

<table style='width: 100%' border='1'>
  <tr>
    <td style='width:60px'><b>Label 1</b></td>
    <td style='width:120px;'><b>Label 2</b></td>
    <td style='max-width:99%;'><b>Label 3</b></td>
  </tr>
</table>

回答by Anson

It sounds like you want the browser to "intelligently" determine how wide each column should be. You want the columns to wrap, but you don't want their widths to be toosmall. The problem is that when it's completely up to the browser, the browser can arbitrarily choose how wide each column is. 10 pixels? 100 pixels? Sure, both would be valid if you're not giving the browser any hints.

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

You can try min-widthand max-widthas a compromise for your column widths to be dynamic but within a certain range.

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

If it's possible that a column may be really narrow (e.g. if the data in that column consists of single-digit numbers), then using just max-width might be preferred.

如果一列可能真的很窄（例如，如果该列中的数据由一位数组成），那么只使用 max-width 可能是首选。

回答by David Zulaica

Perhaps instead of setting the last column to 100%, set it to auto?

也许不是将最后一列设置为 100%，而是将其设置为自动？

<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:auto;">&nbsp;</td>
  </tr>
</table>

回答by Javed

Try this method, might work for you.

试试这个方法，可能对你有用。

.myTable {
  width: 100%;
}
.myTable td:last-child {
  width: auto;
}

<table class="myTable" border="1">
  <tr>
    <td>One Two Three</td>
    <td>Two Three Four</td>
    <td>Three Four Five</td>
    <td>Four Five Six</td>
    <td>&nbsp;</td>
  </tr>
</table>

Or through CSS:

或者通过 CSS：

table {
  width: 100%;
}

table td:nth-child(-n+4) div
{
  min-width: 100px;
}

回答by Amit

try this (Demo)

试试这个（演示）

table {
    width:100%;   
    table-layout: fixed; 
}
td:last-child {
    background: yellow;
    width:200px;
    layout:
}


<table border="1">
<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></td>
</tr>
</table>

回答by paulgmathew

try this, it will occupy 100% width without squashing the last column

试试这个，它会占据 100% 的宽度而不挤压最后一列

<table style="width:100%" border=1>
  <tr style="visibility:hidden">
    <td width=20%></td>
    <td width=20%></td>
    <td width=20%></td>
    <td width=20%></td>
    <td width=20%></td>
  </tr>

  <tr>
    <td>One Two Three</td>
    <td>Two Three Four</td>
    <td>Three Four Five</td>
    <td>Four Five Six</td>
    <td></td>
  </tr>
</table>

leave the fifth column blank and the width will be divided equally

将第五列留空，宽度将被均分

回答by Hyman Thomson

Yes, this is not that difficult, though sometimes various browsers will display this a little differently. There are actually several ways to do this, but this is my favorite. The first rows is just a list of the field names and also setting the width of each column...except the last one.

是的，这并不难，尽管有时各种浏览器的显示方式会有所不同。实际上有几种方法可以做到这一点，但这是我最喜欢的。第一行只是字段名称的列表，还设置了每列的宽度......除了最后一列。

<table style='width: 100%' border='1'>
<tr>
 <td style='width:100px;'><b>Label 1</b></td>
 <td style='width:120px;'><b>Label 2</b></td>
 <td style='width:60px;'><b>Label 3</b></td>
 <td style='width:100px;'><b>Label 4</b></td>
 <td><b>Label 5</b></td>
</tr>

 <!-- insert dynamically generated rows -->

</table>

I have found this works well, particularly if you need only one of the fields to be taking up the remainder. All you do is set the sizes of the fields you need constant, and leaving the one you don't.

我发现这很有效，特别是如果您只需要一个字段来占用其余字段。您所做的就是将需要的字段的大小设置为常量，并保留不需要的字段。

Another way to do this is to define css classes with the specific widths, but that's just another way of formatting the same style sheet, really!

另一种方法是定义具有特定宽度的 css 类，但这只是格式化相同样式表的另一种方式，真的！