除了最后一列以外，如何将表格单元宽度设置为最小值？
我有一个100％宽度的桌子。 如果我把它放在里面，它们就会以相等长度的列分散开来。 但是，我希望所有的列除了最后有尽可能小的宽度，没有包装文本。
我所做的第一件事就是除了最后一个（除了弃用，但是style="width:1px"没有任何作用）之外，我在所有的width="1px"中都设置了width="1px"单词数据在列中。 在这种情况下，为了保持尽可能小的长度，它包裹了我的文字。
让我来certificate一下。 想象一下这个表格：
--------------------------------------------------------------------------------- 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你正在寻找的white-space: nowrap 。
至less在Google Chrome中可以使用。 （ jsFiddle ）
HTML：
<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>
CSS：
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% }
td:not(:last-child){ white-space: nowrap; } td:last-child{ width: 100%; }
通过使用上面的代码，最后一个表格单元格将尽可能大，并且您将防止在之前的表格封装。 这与其他答案一样，但效率更高。
稍微不同的主题，但也许它可以帮助像我这样的人在这个问题上磕磕绊绊。
（我刚刚看到了Campbeln的评论，他在下面写下我的答案之后提出了这个build议，所以这基本上是对他评论的详细解释）
我反过来问题：我想设置一个表列到最小宽度可能没有在白色空间（下面的例子中的最后一列），但另一个的宽度应该是dynamic的（包括换行符）：
----------------------------------------------------------------------------------- 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 -----------------------------------------------------------------------------------
简单的scheme：
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列只能展开到最小宽度，而其他的则保持dynamic。 这是因为td width自动扩展以适合整个内容。
示例片段
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>
如果在表格单元中需要多个文本行。
不要使用white-space: nowrap使用white-space: pre; 代替。
在表单元格中避免使用新行和缩进（空格）等任何代码格式，并使用<br>来设置新的文本行/行。 喜欢这个：
<td>element1<br><strong>second row</strong></td>
在CodePen上演示
您可以通过在td放置div标签来设置固定宽度
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>
