CSS, чтобы столбец таблицы занимал как можно больше места, а другие столбцы - как можно меньше

StackOverflow https://stackoverflow.com/questions/118632

  •  02-07-2019
  •  | 
  •  

Вопрос

Мне нужно верстать html-файл с данными с помощью CSS.

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

Как я могу это сделать, используя простую семантически корректную html-таблицу и только css?

Например:

| Main column                           | Col 2 | Column 3 |
 <------------------ fixed width in px ------------------->
 <------- as wide as possible --------->
 Thin as possible depending on contents: <-----> <-------->
Это было полезно?

Решение

Я далек от того, чтобы быть экспертом по CSS, но это работает для меня (в IE, FF, Safari и Chrome):

td.zero_width {
    width: 1%;
}

Затем в вашем HTML:

<td class="zero_width">...</td>

Другие советы

Аналогично решению Alexk, но, возможно, немного проще в реализации в зависимости от вашей ситуации:

<table>
    <tr>
        <td>foo</td>
        <td class="importantColumn">bar</td>
        <td>woo</td>
        <td>pah</td>
    </tr>
</table>

.importantColumn{
    width: 100%;
}

Возможно, вы также захотите подать заявку white-space:nowrap к ячейкам, если вы хотите избежать переноса.

Я не добился успеха с width: 100%; поскольку кажется, что без контейнера div, который имеет фиксированную ширину, это не приведет к желаемым результатам.Вместо этого я использую что-то вроде следующего, и это, кажется, дает мне наилучшие результаты.

.column-fill { min-width: 325px; }

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top