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

Question

我有一张 100% 宽度的桌子。如果我将<td>s 放入其中，它们会以相同长度的列展开。但是，我希望除最后一列之外的所有列的宽度都尽可能小，而不是换行。

我首先做的是在除最后一个之外的所有<td>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"）这个：

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

我想拿到我最先展示的那张桌子。我如何实现这一目标？ （我宁愿坚持标准并使用 CSS。老实说，我不在乎 IE 是否也没有实现部分标准）

更多解释：我需要的是在不换行的情况下使列尽可能短（最后一列应该尽可能大，以使表格宽度实际达到 100%）。如果您了解 LaTeX，我想要的是当您将表格的宽度设置为 100% 时表格在 LaTeX 中的自然显示方式。

注意：我找到了this，但它仍然给我和上一张桌子一样的东西。

Answer 1

whitespace-wrap: nowrap 不是有效的 CSS。你要找的是white-space: nowrap。

Answer 2

这至少适用于谷歌浏览器。 (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>

Answer 3

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

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

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

Answer 4

略有不同的主题，但也许它可以帮助像我这样偶然发现这个问题的人。
_{（我刚刚看到 Campbeln 的评论，他在下面写下我的答案后提出了这一点，所以这基本上是他的评论的详细解释）}

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

-----------------------------------------------------------------------------------
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 类的列仅扩展到最小宽度，但其他列保持动态。这是因为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>

Answer 5

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

不要使用white-space: nowrap，而是使用white-space: pre;。

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

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

Demo on CodePen

Answer 6

您可以通过在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>

https://jsfiddle.net/8bf17o1v/

Answer 7

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