Подтвердить что ты не робот

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

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

Ответ 2

Это работает в 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>

Ответ 3

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

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

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

Ответ 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 of 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>

Ответ 5

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

Ответ 6

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

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

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

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

Демо в CodePen

Ответ 7

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