使用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 （调整浏览器窗口大小以查看此操作）

＆＃13;

＆＃13;

table {
  width: 100%;
  border: 1px solid black;
  border-collapse: collapse;
}
td + td {
  border-left: 1px solid black;
}
td:last-child {
  background: yellow;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

NB：

IE 10-11存在一个问题，即内联元素（以及显然也是表格单元格）不会被视为弹性项目。

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

  

通过向网格添加非内联显示值可以避免此问题   物品，例如块，内联块，弹性等

<小时/> 顺便说一句：以下内容与without using flexbox相同 - 请注意，上一个td实际上并没有填满余下的空间，而是占用了它拥有自然空间 - 这是OP不想要的。

Answer 2

添加

table-layout: fixed; 

到你的桌子，你已经完成了。

假设其他列中的文本不强制表格超过100％，则最后一列将始终拉伸，因此无需在＆lt; td＆gt;上应用任何宽度。

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

下面是一个可以尝试的代码段：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

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

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

如果某列可能非常狭窄（例如，如果该列中的数据由一位数字组成），则可能首选使用max-width。

Answer 5

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 6

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 7

尝试这种方法，可能适合你。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

或通过CSS：

table {
  width: 100%;
}

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

Answer 8

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

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

试试这个（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 11

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

            

将第五列留空，宽度将平均分配