Ширина столбца таблицы настолько же узка, как содержащиеся данные? - PullRequest
Новая
       8

Ширина столбца таблицы настолько же узка, как содержащиеся данные?

8 голосов
/ 23 апреля 2010

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

Как вы можете сделать это с помощью CSS? Прямо сейчас столбцы справа выглядят глупо с дополнительным пространством. Идеи?

Ответы [ 2 ]

12 голосов
/ 23 апреля 2010

Просто дайте первому столбцу width из 100% и, если необходимо, присвойте ячейкам всех остальных столбцов white-space: nowrap, чтобы избежать переноса их содержимого (опять же, только при необходимости).

* 1006 Е.Г. * 

<table>
    <tr><td class="first">first</td><td>second</td><td>third</td></tr>
    <tr><td class="first">first</td><td>second</td><td>third</td></tr>
    <tr><td class="first">first</td><td>second</td><td>third</td></tr>
</table>

с 

table { width: 100%; }
table td.first { width: 100%; }

Или современный способ, если вы не беспокоитесь о пользователях IE6: 

table { width: 100%; }
table td:first-child { width: 100%; }

(чтобы вы могли удалить class="first")

1 голос
/ 11 ноября 2015

Я только что ответил на это немного другим подходом с на этот более подробный ответ на похожий вопрос , в основном:

Добавьте класс shrink к столбцам, которые вы хотите иметь как можно более узкими 

<table>
    <tr><td>first</td><td class="shrink">second</td><td class="shrink">third</td></tr>
    <tr><td>first</td><td class="shrink">second</td><td class="shrink">third</td></tr>
    <tr><td>first</td><td class="shrink">second</td><td class="shrink">third</td></tr>
</table>

С этим css: 

td.shrink {
  white-space: nowrap;
  width: 1px;
}

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

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

table {
  width: 100%;
}

td {
  padding: 10px;
}

td.shrink {
  white-space: nowrap;
  width: 1px;
}
<table>
    <tr><td>first</td><td class="shrink">second</td><td class="shrink">third</td></tr>
    <tr><td>first</td><td class="shrink">second</td><td class="shrink">third</td></tr>
    <tr><td>first</td><td class="shrink">second</td><td class="shrink">third</td></tr>
</table>
...