«Стандартный» способ уменьшить ширину столбца таблицы для соответствия дочернему элементу

У меня есть таблица с известной шириной, 776 пикселей и тремя столбцами. Третий столбец имеет известную ширину, 216 пикселей, но две другие не имеют ширины. Поведение, которое я хочу, для второго столбца имеет ту же ширину, что и его дочерний элемент. Какая бы ни была ширина, 776 - 216 - вторая, будет шириной для первого столбца.«Стандартный» способ уменьшить ширину столбца таблицы для соответствия дочернему элементу

Я нашел пример, который устанавливает ширину столбца, ширина которого должна быть минимальной до 1 пикселя. Кажется, это работает, но похоже, что это взлом, и я не понимаю, почему он работает. Существует ли более «стандартный» способ достижения такого же результата?

Вот мой HTML с встроенным CSS в качестве примера:

<table style="width:776px; height:48px;"> 
    <tr> 
     <td style="height:48px;"> 
      <!-- Note: Setting font size to zero prevents white space from contributing to an inline block element's width --> 
      <div style="background:#f0f0f0; border:solid 2px #808080; font-size:0; margin-left:8px; text-align:center;"> 
       <a href="#"><h3 style="display:inline-block; font-size:20px; line-height:28px; padding:8px;">Art</h3></a> 
       <a href="#"><h3 style="display:inline-block; font-size:20px; line-height:28px; padding:8px;">Events</h3></a> 
       <a href="#"><h3 style="display:inline-block; font-size:20px; line-height:28px; padding:8px;">Papers</h3></a> 
       <a href="#"><h3 style="display:inline-block; font-size:20px; line-height:28px; padding:8px;">Research</h3></a> 
      </div> 
     </td> 
     <!-- Note: Setting width to one pixel removes horizontal spacing --> 
     <td style="vertical-align:middle; width:1px; height:48px;"> 
      <h3 style="margin-left:8px;"><label for="search">Search:</label></h3> 
     </td> 
     <td style="vertical-align:middle; width:216px; height:48px;"> 
      <input id="search" style="margin-left:8px; width:208px;" type="text" value="" maxlength="32"> 
     </td> 
    </tr> 
</table>

источник

2014-09-17 asimes

Не используйте таблицы для макета, это будет мой первый комментарий. –

В модели таблицы CSS корректно определен только алгоритм размещения фиксированной таблицы. Автоматический алгоритм компоновки таблиц по умолчанию зависит от реализации и не стандартизирован - хотя большинство браузеров реализуют его аналогично, могут быть различия. См. [Раздел 17.5.2] (http://www.w3.org/TR/CSS21/tables.html#width-layout) спецификации. Обратите внимание, что это верно независимо от того, используете ли вы фактический элемент '

' или используете другие типы элементов с помощью' display: table' и др. – BoltClock

В соответствии с тем, как страница структурирована, столбцы таблицы будут занимать остальную часть пространства, оставленную третьей, если вы используете правильное свойство отображения для дочерних элит (обычно это работа с табличной или блочной работой). Кроме того, я согласен с @Paulie_D –

ответ

Я нашел причину, почему эта работа действительно BoltClocks ссылке (в комментариях) : http://www.w3.org/TR/CSS21/tables.html#auto-table-layout

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

ширины столбцов определяется следующим образом:

Вычислить минимальная ширина содержимого (MCW) каждой ячейки: форматированное содержимое может занимать любое количество строк, но не может вытечь коробку клеток. Если указанная «ширина» (W) ячейки больше MCW, W - минимальная ширина ячейки. Значение «auto» означает, что MCW является минимальной шириной ячейки ...

Ответ:
Вычислить минимальная ширина содержимого (MCW) каждой ячейки: форматированное содержимое ... не может переполнить поле клеток.

источник

2014-09-17 16:47:09 asimes

Ну, легкий способ будет установить 1-ю ячейку width: 100%. Это заставило бы его заполнить столько, сколько возможно для ширины родительской таблицы. Затем в третью ячейку вы помещаете элемент содержимого 216px (например, div).

Ячейка стола всегда стараюсь уважать его содержание. Таким образом, 2-й дивизор будет сжиматься посередине, просто соблюдая его собственное содержание. Третий будет уважать его контент 216px, а 1-й будет заполнять остальные.

Working JsFiddleExample

<table> 
    <tr> 
     <td>1stContent</td> <!-- Fills what it can --> 
     <td>2ndContent</td> <!-- Squized in the middle --> 
     <td> 
      <!-- Will respect the width of its content --> 
      <div class="dv3rd"> 
       216px 
      </div> 
     </td> 
    </tr> 
</table>

CSS:

table { 
    width: 776px; 
    background: silver; 
} 

td:nth-child(1) { 
    width: 100%; 
    background: red; 
} 

td:nth-child(2) { 
    background: green; 
} 

td:nth-child(3) { 
    background: blue; 
} 

.dv3rd { 
    width: 216px; 
}

Однако

Как хорошо прокомментирован, вы не должны использовать таблицы для разметки страницы. Простая замена будет работать с css-таблицами, где ваши div могут действовать как display: table и display: table-cell элементов.

Вот тот же пример, но с использованием DIV вместо:

Working JsFiddleExample - Tableless

<div class="table"> 
    <div> 
     1stContent 
    </div> 
    <div> 
     2ndContent 
    </div> 
    <div> 
     <div class="dv3rd"> 
      216px 
     </div> 
    </div> 
</div>

CSS:

.table { 
    width: 776px; 
    background: silver; 
    display: table; 
} 

.table > div:nth-child(1) { 
    display: table-cell; 
    width: 100%; 
    background: red; 
} 

.table > div:nth-child(2) { 
    display: table-cell; 
    background: green; 
} 

.table > div:nth-child(3) { 
    display: table-cell; 
    background: blue; 
} 

.dv3rd { 
    width: 216px; 
}

источник

2014-09-17 16:20:57 LcSalazar

На мой взгляд, это также хак в обоих случаях, который по какой-то причине работает как ** 100% + 216 + x> 100% **. Мой взлом также работает, и я хочу знать, почему мой хак работает, почему ваш хак работает, или как это сделать без хакерского решения. – asimes

@asimes, я не уверен, что вы подразумеваете под * hack *. Ячейка имеет два постоянных поведения: 1 - сумма ячеек всегда будет заполнять всю таблицу. 2 - Ячейка не будет меньше, чем собственный контент. Основываясь на этих двух предпосылках, мы можем собрать этот * взлом *. – LcSalazar

Ах, я не знал, что эти два правила были официальными, было бы понятно, почему эти работы тогда. Посмотрите, существуют ли они в ссылке @ BoltClock – asimes

Смежные вопросы