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

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.

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.

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:

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

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

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

108775 次浏览
小开
最佳答案

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

小开

这至少在谷歌浏览器中是可行的(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
-----------------------------------------------------------------------------------

简单的解决办法:

超文本标示语言

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

小开

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

不要使用 white-space: nowrap而是使用 white-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:

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

https://jsfiddle.net/8bf17o1v/

小开

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


提交答案