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

Question

我有一张宽100%的桌子.如果我将<td>s放入其中,它们会以相等长度的列展开.但是,我希望除了last之外的所有列都具有尽可能小的宽度,而不包装文本.

我首先做的是我设置width="1px"了<td>除了最后一个以外的所有(虽然已经弃用,但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中.

注意:我发现了这个,但它仍然给我与上一张桌子相同.

Answer 1

这至少适用于谷歌浏览器.(jsFiddle)

HTML:

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

CSS:

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

whitespace-wrap: nowrap是无效的CSS.这是white-space: nowrap你在找.

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仅扩展到最小宽度,但其他列保持动态.这工作,因为width中td会自动扩展以适应整个内容.

示例代码段

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>