使用最后一列填充剩余使表格宽度为 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

只需添加

table-layout: fixed; 

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

假设您在其他列中的文本不会强制表格宽度超过 100%，那么您的最后一列将始终拉伸，因此无需在

上应用任何宽度。

【讨论】：

• 嗯，这似乎行不通，至少在当代 Chrome 中是这样。我添加了一个 sn-p 来说明您的答案，正如您所看到的，它在列之间分配空格，而不是将其留到最后一个
• 我同意，这并不能解决问题，如果两列中有较长的字符串，它们会重叠

Answer 2

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

下面，有一个 sn-p 可以尝试：

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

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

但他也提出了一种解决方法——添加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>

Answer 3

也许不是将最后一列设置为 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>

Answer 4

试试这个，它会占据 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>

第五列留空，宽度平分

Answer 5

我通过对最后一列使用 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>

Answer 6

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

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

或通过 CSS：

table {
  width: 100%;
}

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

Answer 7

您可以使用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 存在一个问题，即内联元素（显然还有表格单元格）不被视为弹性项目。

Phillip Walton here 记录了此问题，解决方法（来自上述帖子）是：

可以通过向 物品，例如块、内联块、flex 等。

---

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

Answer 8

试试这个 (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>

Answer 9

这取决于您可用的技术，但也许您可以尝试

/* CSS3 method */
table {
   width: 100%;
}
table td:nth-child(-n+4) {
   min-width: 25%; /* Or set the minimum PX/Percent width */
}

/* CSS2 without nth-child selector */

table {
   width: 100%;
}
table td,
table td + td,
table td + td + td,
table td + td + td + td {
   min-width: 25% /* Or set the minimum PX/Percent width */
}       

这应该设置内容区域的宽度，并允许最后一列动态地找到它的宽度。

另一种方法可能是执行类似的操作，假设您能够将内容放入表格中。

/*Markup*/ 
<table width="100%" border="1">
   <tr>
      <td>
         <div>One</div>
      </td>
      <td>
         <div>Two</div>
      </td>
      <td>
         <div>Three</div>
      </td>
      <td>
         <div>Four</div>
      </td>
      <td>
         <div>Five</div>
      </td>
      <td>
         <div>&nbsp;</div>
      </td>
   </tr>
</table>


/* CSS3 method */

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

/* CSS2 without nth-child selector */

table {
   width: 100%;
}
table td div,
table td + td div,
table td + td + td div,
table td + td + td + td div {
   min-width: 100px;
}   

Answer 10

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

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

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

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

Answer 11

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

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

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