Как сделать столбец таблицы минимальной шириной

Вот файл данных шаблона: https://github.com/Hoektronics/BotQueue/blob/master/views/bot/dashboard_list.ejs

Я пытаюсь сделать 8 из 10 столбцов таблицы, чтобы получить только минимальную ширину, которая им нужна, на основе текста, учитывая заголовки заполнения и столбца.

В изображении примера я хочу, чтобы все, кроме 4-го и 9-го столбцов, занимали минимальную ширину. Технически есть 9 заголовков столбцов, а последний имеет номер столбца 2. Последний заголовок представляет собой span3. Я бы хотел, чтобы процентный столбец занимал наименьшую ширину, что необходимо, и пусть индикатор выполнения или кнопки pass/view/fail занимают все остальное.

Столбец 4 настроен для замены переполненного текста эллипсисом.

Пример изображения:

Ответ 1

Есть трюк, который включает настройку некоторых ячеек на очень маленькую ширину, а затем применение свойства white-space: nowrap:

<table>
    <tr>
        <td class="min">id</td>
        <td class="min">tiny</td>
        <td>Fills space</td>
        <td>Fills space</td>
        <td class="min">123</td>
        <td class="min">small</td>
        <td>Fills space, wider</td>
        <td>Fills space</td>
        <td class="min">thin</td>
    </tr>
</table>

td {
    width: auto;
}

td.min {
    width: 1%;
    white-space: nowrap;
}

Демо-версия

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

ПРИМЕЧАНИЕ. Если у вас есть thead, вы также хотите применить td stylings к th.

UPDATE # 1: Эллипсис (...)

Чтобы автоматически свернуть длинный столбец в эллипсы, многоточие text-overflow: ellipsis то, что вы, скорее всего, ищете:

td.cell-collapse {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

Демо-версия

Это также требует, чтобы overflow было hidden, а также width или max-width с фиксированным значением. Добавьте класс cell-collapse в ячейки, ширина которых вы хотели бы ограничить.

ОБНОВЛЕНИЕ # 2: Обработка бутстрапа

width: 100%; table загрузки Bootstrap width: 100%; что испортит этот подход. Вы можете исправить это с помощью table { width: inherit !important; } table { width: inherit !important; }

Демо-версия

ПРИМЕЧАНИЕ. Таблицы в этом подходе уже имеют полную ширину, поскольку ячейки таблицы уже имеют width: auto; ,

Предыдущее решение Javascript-base удалено, так как чистый CSS-подход теперь работает последовательно во всех современных браузерах. Исходный код по-прежнему доступен на связанном JSfiddle, прокомментированном.

Ответ 2

Если вы знаете размеры, которые хотите разместить в своей колонке, и они исправлены, я предлагаю использовать фиксированный макет таблицы. Он позволяет указать фиксированный% каждого столбца.

Здесь ссылка, которая помогла мне в аналогичной ситуации http://css-tricks.com/fixing-tables-long-strings/