it-swarm.com.ru

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

У меня есть таблица с шириной 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%.

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

97
Shahbaz

whitespace-wrap: nowrap не действителен css. Это white-space: nowrap вы ищете.

45
Ben Lee

Это работает в Google Chrome, по крайней мере. ( jsFiddle )

HTML:

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

CSS:

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%
}
86
yunzen
td:not(:last-child){
    white-space: nowrap;
}

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

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

32
Gust van de Wal

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

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

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

7
Markus

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

3
Стас Пишевский

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

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

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

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

Демо на CodePen

1
Matěj Kříž

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

0
rubmz