最後の列を除いてテーブルセルの幅を最小にするにはどうすればよいですか？

100％幅のテーブルがあります。私<td>がそれにs を入れると、それらは同じ長さの列で広がります。ただし、最後を除くすべての列の幅をできるだけ小さくし、テキストを折り返さないようにします。

最初に行ったのは、最後を除く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でテーブルが自然に表示される方法が欲しいです。

注：これを見つけましたが、それでも最後のテーブルと同じです。

whitespace-wrap: nowrap有効なCSSではありません。それはwhite-space: nowrapあなたが探しているものです。

これは少なくとも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>

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

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

上記のコードを使用することにより、最後のテーブルセルをできるだけ大きくしようとし、それより前のセルが折り返されないようにします。これは、他の回答と同じですが、はるかに効率的です。

少し違うトピックですが、私のようにこの質問に出くわした人に役立つかもしれません。
_{（私は以下の私の答えを書いた後で正確にこれを示唆しているCampbelnのコメントを見たので、これは基本的に彼のコメントの詳細な説明です）}

逆の問題がありました：1つのテーブル列を空白で分割せずに可能な限り最小の幅に設定したいのですが（次の例では最後の列）、他の幅は動的（改行を含む）である必要があります。

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

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/

テーブルセルに複数のテキスト行が必要な場合。

代わりにuseをwhite-space: nowrap使用しないでくださいwhite-space: pre;。

表のセルでは、新しい行やインデント（空白）などのコード形式を避け<br>、新しいテキスト行/行を設定するために使用します。このような：

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

CodePenのデモ

どちらwhite-space: nowrapかwhite-space: preを組み合わせて使用するmin-width: <size>と効果的です。width: <size>それ自体では、テーブルを圧迫しないようにするのに十分ではありません。