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

我有一张100%宽的桌子。如果我把

s放进去，它们就会以等长列展开。但是，我希望除最后一列之外的所有列都具有尽可能小的宽度，而不包装文本

我首先做的是在所有

中设置

width=“1px”

，但最后一个除外（虽然已弃用，但

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”

）如下：

我想先拿到我介绍的桌子。我如何做到这一点？（我宁愿坚持标准并使用CSS。老实说，我也不在乎IE是否还没有实现部分标准）

更多说明：我需要的是在不包装单词的情况下尽可能地保持列的短（最后一列应该尽可能大，以使表的宽度实际达到100%）。如果你知道LaTeX，我想知道的是当你将表格的宽度设置为100%时，表格在LaTeX中的自然显示方式

---

注意：我找到了，但它仍然给出了与上一个表相同的结果。

空白换行：nowrap

不是有效的css。这是你要找的

空白：nowrap

。

至少在谷歌浏览器中是这样。（）

表格{
边框：1px纯绿色；
边界塌陷：塌陷；
宽度：100%；
}
表td{
边框：1px纯绿色；
}
表td.1{
空白：nowrap
}
表td.expand{
宽度：99%
}

要素1
数据
垃圾
最后一栏
元素
更多数据
其他东西
最后一列
更多
属于
这些
排

---

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

主题略有不同，但可能对像我这样在这个问题上绊倒的人有所帮助。
（我刚刚看到Campbeln的评论，他在写下我的回答后提出了这一点，因此这基本上是对他的评论的详细解释）

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

简单解决方案：

HTML 类

收缩的列仅扩展到最小宽度，而其他列保持动态。这是因为
td
的
width
会自动扩展以适应整个内容

示例代码段

表格{
宽度：100%；
}
运输署{
填充：10px；
}
收缩{
空白：nowrap；
宽度：1px；
}

要素1
数据
这里的垃圾可以跨越多条线
最后一列，最小宽度，一行
元素
更多数据
其他东西
最后一列
更多
属于
这些
排
如果表格单元格中需要多行文本。

不要使用
空白：nowrap
使用
空白：pre取而代之

在表格单元格中，避免任何代码格式，如新行和缩进（空白），并使用

设置新的文本行/行。像这样：

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

元素1
第二行

您可以通过将
div
标记放置在
td


表格{
边框：1px纯绿色；
边界塌陷：塌陷；
宽度：100%；
}
表td{
边框：1px纯绿色；
}
表td:N个孩子（1）{
宽度：1%；
}
表td:N个儿童（1）分区{
宽度：300px；
}

元素1元素1元素1元素1元素1元素1元素1元素1元素1
数据
垃圾
最后一栏
元素2
数据
垃圾
最后一栏
元素3
数据
垃圾
最后一栏
将
空白：nowrap
或
空白：pre
与
最小宽度：
组合使用即可<代码>宽度：
本身不足以保持桌子不被挤压。
我必须根据需要翻转
宽度方法，因为我有多个宽列（而不是上面的解决方案更适合一个宽列）。我从
expand
中删除了
width:99%
，并将
width:1%
添加到
shrink
中，这个解决方案对我很有效！可爱！如果您希望扩展同一列，而不是用类标记所有内容，我会这样做：
td:nth-child（1），td:nth-child（2）{white-space:nowrap；}td:nth-child（3）{width:99%；}
——以防万一有新手来访。：）@ElizaWy在这个答案（）中，我创建了一个jQuery脚本，让您将
col
的
class
attributes'值复制到相应的表
td
，显然是这样！考虑到我只是误读了css字段，这也是一个令人尴尬的问题。我喜欢简单。仅供参考，至少在IE11（边缘模式）中，必须添加
width:1px到非最后一个子样式，以最小宽度呈现非最后一列。显然，这是本页上最干净的解决方案！
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
-----------------------------------------------------------------------------------

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

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

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