Як встановити мінімальну ширину комірок таблиці, крім останнього стовпця?

У мене таблиця зі 100% шириною. Якщо я покладу <td>в неї, вони вийдуть із стовпчиків однакової довжини. Однак я хочу, щоб усі стовпці, крім останнього, мали якомога меншу ширину, без обгортання тексту.

Перше, що я зробив, це те, що я встановив 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, я хочу те, як таблиці, природно, відображаються в LaTeX, коли ви встановлюєте їх ширину на 100%.

Примітка. Я знайшов це, але він все одно дає мені те саме, що і в минулій таблиці.

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

Використовуючи наведений вище код, остання комірка таблиці намагатиметься бути максимально великою, і ви не зможете загортати ті, що були раніше. Це робить те саме, що й інші відповіді, але набагато ефективніше.

Трохи інша тема, але, можливо, це допомагає тому, хто натикається на це питання, як я.
_{(Я щойно побачив коментар Кемпбельна, який пропонує саме це після написання моєї відповіді нижче, тож це в основному детальне пояснення його коментаря)}

У мене була проблема навпаки: я хотів встановити одну колонку таблиці на мінімально можливу ширину, не розбиваючи її на пробіл (останній стовпець у наступному прикладі), але ширина іншої повинна бути динамічною (включаючи розриви рядків):

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

Якщо вам потрібно кілька рядків тексту в комірці таблиці.

Не 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>на собі недостатньо, щоб утримати стіл від здавлювання.