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

How do I set the table cell widths to minimum except last column?

提问by Shahbaz

I have a table with 100% width. If I put <td>s in it, they get spread out with equal length columns. However, I want all the columns except last to have as small a width as possible, without wrapping text.

我有一张 100% 宽度的桌子。如果我把<td>s 放在里面，它们会以等长的列散开。但是，我希望除最后一列之外的所有列的宽度尽可能小，而不用换行文本。

What I did first was that I set width="1px"in all <td>s except last (although deprecated, but the style="width:1px"didn't have any effect), which worked fine until I had multi-word data in the column. In that case, to keep the length as small as possible, it wrapped my text.

我首先做的是我设置width="1px"了<td>除 last 之外的所有s（虽然已弃用，但style="width:1px"没有任何影响），这一直很好，直到我在列中有多字数据。在那种情况下，为了保持尽可能小的长度，它包裹了我的文本。

Let me demonstrate. Imagine this table:

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

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

No matter what I try, what I keep getting is either this:

无论我尝试什么，我不断得到的是：

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

or (even though I set style="whitespace-wrap:nowrap") this:

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

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

I want to get the table I presented first. How do I achieve this? (I'd rather stick to standard and using CSS. I honestly don't care if IE hasn't implemented part of the standard either)

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

More explanation: What I need is to keep the columns as short as possible without wrapping words (last column should be as large as it needs to make the table width actually reach 100%). If you know LaTeX, what I want is how tables naturally appear in LaTeX when you set their width to 100%.

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

Note: I found thisbut it still gives me the same as last table.

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

采纳答案by Ben Lee

whitespace-wrap: nowrapis not valid css. It's white-space: nowrapyou're looking for.

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

回答by yunzen

This works in Google Chrome, at least. (jsFiddle)

这至少适用于 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>

回答by Gust van de Wal

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

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

By using the code above, the last table-cell will try to be as big as possible, and you will prevent the ones before that from wrapping. This does the same as the other answers given, but way more efficient.

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

回答by Markus

Slightly different topic but maybe it helps someone who stumbles on this question like me.
_{(I just saw the comment by Campbeln who suggests exactly this after writing my answer below, so this is basically a detailed explanation of his comment)}

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

I had the problem the other way around: I wanted to set one table column to the minimum width possible without breaking it on white space (last column in the following example) but the other's width should be dynamic (including line breaks):

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

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

Simple solution:

简单的解决方案：

HTML

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

CSS

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

Columns with class shrinkonly expand to the minimum width but others stay dynamic. This works because widthof tdis automatically expanded to fit whole content.

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

Example Snippet

示例代码段

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>

回答by Стас Пишевский

You can set fix width by placing divtag inside td

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

https://jsfiddle.net/8bf17o1v/

回答by Matěj K?í?

If you need multiple text lines in table cell.

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

Do not use white-space: nowrapuse white-space: pre;instead.

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

In table cell avoid any code format like new lines and indention (white-space) and use <br>to set a new text line/row. Like this:

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

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

Demo on CodePen

CodePen 上的演示

回答by rubmz

A combination of either white-space: nowrapor white-space: prewith min-width: <size>will do the job. width: <size>on itself is not enough to hold the table from squeezing.

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