如何将表格单元格的宽度设置为除最后一列以外的最小值？

我有一张100％宽的桌子。如果将<td>s放入其中，它们将以等长的列散开。但是，我希望除last以外的所有列都具有尽可能小的宽度，而无需换行。

我首先要做的是除了最后一个（尽管已弃用，但没有任何效果）之外，我设置width="1px"了所有<td>s style="width:1px"，直到在该列中包含多字数据之前，它都可以正常工作。在这种情况下，为了使长度尽可能小，它包装了我的文字。

让我示范一下。想象一下这张桌子：

---------------------------------------------------------------------------------
element1 | data      | junk here   | last column
---------------------------------------------------------------------------------
elem     | more data | other stuff | again, last column
---------------------------------------------------------------------------------
more     | of        | these       | rows
---------------------------------------------------------------------------------

无论我尝试什么，我都会得到的是：

---------------------------------------------------------------------------------
element1         | data             | junk here        | last column
---------------------------------------------------------------------------------
elem             | more data        | other stuff      | again, last column
---------------------------------------------------------------------------------
more             | of               | these            | rows
---------------------------------------------------------------------------------

或者（即使设置了style="whitespace-wrap:nowrap"）：

---------------------------------------------------------------------------------
         |      | junk  | last
element1 | data |       | 
         |      | here  | column
---------------------------------------------------------------------------------
         | more | other | again,
elem     |      |       | last
         | data | stuff | column
---------------------------------------------------------------------------------
more     | of   | these | rows
---------------------------------------------------------------------------------

我想得到我首先提出的桌子。我该如何实现？（我宁愿坚持使用标准并使用CSS。老实说，我也不在乎IE是否也未实现标准的一部分）

更多说明：我需要使列尽可能短而不用换行（最后一列应尽可能大以使表的宽度实际达到100％）。如果您了解LaTeX，我想要的是将表的宽度设置为100％时，表自然出现在LaTeX中的方式。

注意：我发现了这一点，但它仍然使我与上一张表相同。

whitespace-wrap: nowrap无效的CSS。是white-space: nowrap您要找的。

至少在Google Chrome中可以使用。（jsFiddle）

table {
  border: 1px solid green;
  border-collapse: collapse;
  width: 100%;
}

table td {
  border: 1px solid green;
}

table td.shrink {
  white-space: nowrap
}

table td.expand {
  width: 99%
}

<table>
  <tr>
    <td class="shrink">element1</td>
    <td class="shrink">data</td>
    <td class="shrink">junk here</td>
    <td class="expand">last column</td>
  </tr>
  <tr>
    <td class="shrink">elem</td>
    <td class="shrink">more data</td>
    <td class="shrink">other stuff</td>
    <td class="expand">again, last column</td>
  </tr>
  <tr>
    <td class="shrink">more</td>
    <td class="shrink">of </td>
    <td class="shrink">these</td>
    <td class="expand">rows</td>
  </tr>
</table>

td:not(:last-child){
    white-space: nowrap;
}

td:last-child{
    width: 100%;
}

通过使用上面的代码，最后一个表格单元将尝试尽可能大，并且您将防止之前的表格单元进行包装。这样做与其他给出的答案相同，但是效率更高。

主题略有不同，但可能会帮助像我这样偶然发现此问题的人。
_{（我刚刚看到坎伯恩的评论，他在下面写下我的答案后提出了确切的建议，所以这基本上是对他的评论的详细解释）}

我遇到了另一种问题：我想将一个表列设置为可能的最小宽度，而又不要在空白处打断它（下例中的最后一列），但另一个表的宽度应该是动态的（包括换行符）：

-----------------------------------------------------------------------------------
element1 | data      | junk here which can   | last column, minimum width, one line
                       span multiple lines
-----------------------------------------------------------------------------------
elem     | more data | other stuff           | again, last column
-----------------------------------------------------------------------------------
more     | of        | these                 | rows
-----------------------------------------------------------------------------------

简单的解决方案：

的HTML

<table>
  <tr>
    <td>element1</td>
    <td>data</td>
    <td>junk here which can span multiple lines</td>
    <td class="shrink">last column, minimum width, one line</td>
  </tr>
  <tr>
    <td>elem</td>
    <td>more data</td>
    <td>other stuff</td>
    <td class="shrink">again, last column</td>
  </tr>
  <tr>
    <td>more</td>
    <td>of</td>
    <td>these</td>
    <td class="shrink">rows</td>
  </tr>
</table>

的CSS

td.shrink {
  white-space: nowrap;
  width: 1px;
}

具有类的列shrink仅扩展到最小宽度，而其他列保持动态。因为这个作品width的td会自动扩展以适应整个内容。

示例片段

table {
  width: 100%;
}

td {
  padding: 10px;
}

td.shrink {
  white-space: nowrap;
  width: 1px;
}

<table>
  <tr>
    <td>element1</td>
    <td>data</td>
    <td>junk here which can span multiple lines</td>
    <td class="shrink">last column, minimum width, one line</td>
  </tr>
  <tr>
    <td>elem</td>
    <td>more data</td>
    <td>other stuff</td>
    <td class="shrink">again, last column</td>
  </tr>
  <tr>
    <td>more</td>
    <td>of</td>
    <td>these</td>
    <td class="shrink">rows</td>
  </tr>
</table>

您可以通过将div标签放在里面来设置固定宽度td

table {
    border: 1px solid green;
    border-collapse: collapse;
    width:100%;
}

table td {
    border: 1px solid green;
}

table td:nth-child(1) {
  width: 1%;
}

table td:nth-child(1) div {
  width: 300px;
}

<table>
    <tr>
        <td><div>element1 element1 element1 element1 element1 element1 </div></td>
        <td>data</td>
        <td>junk here</td>
        <td>last column</td>
    </tr>
    <tr>
        <td><div>element2</div></td>
        <td>data</td>
        <td>junk here</td>
        <td>last column</td>
    </tr>
    <tr>
        <td><div>element3</div></td>
        <td>data</td>
        <td>junk here</td>
        <td>last column</td>
    </tr>
</table>

https://jsfiddle.net/8bf17o1v/

如果您在表格单元格中需要多个文本行。

不要使用white-space: nowrapuse white-space: pre;来代替。

在表格单元格中，请避免使用任何代码格式，例如<br>换行和缩进（空格），并用于设置新的文本行/行。像这样：

<td>element1<br><strong>second row</strong></td>

在CodePen上演示

white-space: nowrap或white-space: pre与的组合min-width: <size>将完成工作。width: <size>本身不足以阻止桌子挤压。