Как установить минимальную ширину ячеек таблицы, кроме последнего столбца?


106

У меня таблица шириной 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, мне нужно, чтобы таблицы выглядели в LaTeX естественным образом, когда вы устанавливаете их ширину на 100%.

Примечание: я нашел это, но он по-прежнему дает то же самое, что и в последней таблице.


Судя по всему, это так! Также смущает, учитывая, что я просто неправильно прочитал поле css.
Shahbaz

Ответы:



97

По крайней мере, это работает в 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>


7
Сделал и мой день тоже :) <3
Каан Сорал

10
Мне пришлось изменить widthподход в соответствии с моими потребностями, так как у меня есть несколько широких столбцов (а не один широкий столбец, поскольку решение выше работает лучше). Я снял width: 99%с expandи добавил width: 1%к shrinkи это решение работает хорошо для меня!
Campbeln

2
Прекрасно! Если вы хотите, чтобы тот же столбец был расширен, вместо того, чтобы отмечать все классом, я сделал следующее: td:nth-child(1), td:nth-child(2){white-space:nowrap;} td:nth-child(3){width: 99%;}- На всякий случай, когда появятся какие-то новички. :)
ElizaWy

@ElizaWy В этот ответ ( stackoverflow.com/questions/9623601/... ) Я создал JQuery скрипт, который давайте вы копируете col«s classзначение атрибуты» к соответствующей таблице tds
yunzen

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

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

Используя приведенный выше код, последняя ячейка таблицы будет стараться быть как можно больше, и вы предотвратите перенос предыдущих ячеек. Это делает то же самое, что и другие предоставленные ответы, но более эффективно.


Любите простоту.
juanmirocks

3
FYI, по крайней мере, в IE11 (краевой режим), нужно добавить width: 1px;к непоследнему дочернему стилю, чтобы не последние столбцы отображались с минимальной шириной.
ewh

Однозначно самое чистое решение на этой странице! 👍
директоров

13

Немного другая тема, но, возможно, это поможет кому-то, кто сталкивается с этим вопросом, например, мне.
(Я только что видел комментарий Кэмпбельна, который предлагает именно это после написания моего ответа ниже, так что это в основном подробное объяснение его комментария)

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

-----------------------------------------------------------------------------------
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автоматически расширяются , чтобы соответствовать всему содержимому.

Пример фрагмента


3

Вы можете установить ширину фиксации, поместив 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/


1

Если вам нужно несколько строк текста в ячейке таблицы.

Не white-space: nowrapиспользуйте white-space: pre;вместо этого.

В ячейке таблицы избегайте любого формата кода, такого как новые строки и отступ (пробел), и используйте <br>для установки новой строки / строки текста. Как это:

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

Демо на CodePen


0

Сочетание либо white-space: nowrapили white-space: preс min-width: <size>будет делать эту работу. width: <size>сам по себе недостаточно, чтобы удерживать стол от сдавливания.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.