Смежный элемент в ответном макете

Question

У меня есть табличная структура. Это выглядит примерно так:

┌───────────────────────┬───────────┬────────┐ 
│Big column    |Info 1  |Info 2 | 
╞═══════════════════════╪═══════════╪════════╡ 
┊......     ┊...  ┊...  ┊ 
└───────────────────────┴───────────┴────────┘ 

Когда окно браузера слишком мал, чтобы поместиться все три колонки, я хочу, чтобы изменить это:

┌───────────────────────┐ 
│Big column    | 
├──────────────┬────────┤ 
│Info 1  |Info 2 | 
╞══════════════╧════════╡ 
┊......     ┊ 
├──────────────┬────────┤ 
┊...   ┊...  ┊ 
└──────────────┴────────┘ 

Следует отметить, что «Info 2» является более или менее фиксированная с заданной максимальной шириной (130 пикселей)

Общая компоновка достигается с использованием display: table/table-row/table-cell в первом случае, но единственное решение, которое я нашел для второго случая, выглядит хакерским.

.cell:first-child { 
    display: block; 
} 
.cell:nth-child(2) { 
    display: inline-block; 
    width: calc(100% - 130px); 
    box-sizing: border-box; 
} 
.cell:last-child { 
    display: inline-block; 
    width: 130px; 
    box-sizing: border-box; 
} 

... Да. Хак.

Есть ли способ достичь этого, не прибегая к использованию calc()? Я пробовал float, но либо ячейка «Info 1» обрушивается на минимальную ширину, чтобы соответствовать ее содержимому, либо ячейка «Info 2» опускается на одну строку ниже, ни одна из которых не работает.

EDIT: HTML, как и требовалось, тривиальна:

<div id="bigtable"> 
    <div class="row"> 
     <div class="cell">Big column</div> 
     <div class="cell">Info 1</div> 
     <div class="cell">Info 2</div> 
    </div> 
    <!-- ... --> 
</div> 

Answer 1

Это то, что grids like Bootstrap's были разработаны для, хотя вы должны решить для точки останова и относительной ширины. Рассмотрим загрузку just the grid (14.9KB).

<div class="container-fluid"> 
    <div class="row" id="bigtable"> 
     <div class="col-xs-12 col-sm-6"> 
      <div>Big column</div> 
     </div> 
     <div class="col-xs-8 col-sm-4"> 
      <div>Info 1</div> 
     </div> 
     <div class="col-xs-4 col-sm-2"> 
      <div>Info 2</div> 
     </div> 
    </div> 
</div> 

Demo

Обратите внимание, что я установил мин ширину на контейнере, чтобы держать вашу колонку Info 2 выше 130 пикс.

Answer 2

Вы можете заставить разрыв строки с этим трюком:

• отображения строки как table-row-group s вместо table-row s
• Вставьте пустой элемент в месте, где вы хотите отдохнуть, а также отображать его в качестве table-row.

Однако вы хотите, чтобы ячейка в первой строке покрывала ту же ширину, что и две ячейки в следующей строке. Этого не может быть достигнуто с помощью таблиц CSS, но вы можете использовать таблицы HTML и атрибут colspan.

Это будет отображаться правильно. Тем не менее, стилизация первой ячейки каждой строки с colspan="2" является ошибкой модели таблицы, потому что есть столбец без ячейки. Если вам не нравятся ошибки проверки, вы можете добавить дополнительную строку без colspan="2" и скрыть ее с помощью CSS. Эта строка должна иметь по крайней мере две ячейки, чтобы избежать ошибки, или ровно 4, чтобы избежать предупреждения.

#bigtable { 
 
    border-collapse: collapse; 
 
} 
 
#bigtable tr { 
 
    display: table-row-group; 
 
} 
 
#toggler:checked ~ #bigtable script { 
 
    display: table-row; 
 
} 
 
#bigtable [hidden] { 
 
    display: none; 
 
} 
 
/* Optional */ #bigtable tr { border: 3px solid; } #bigtable td { border: 1px solid; }

<input type="checkbox" id="toggler" /> 
 
<label for="toggle">Toggle table style</label> 
 
<table id="bigtable"> 
 
    <tr> 
 
    <td colspan="2">Big column</td> 
 
    <script hidden></script> 
 
    <td class="cell">Info 1</td> 
 
    <td class="cell">Info 2</td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="2">A</td> 
 
    <script hidden></script> 
 
    <td>B</td> 
 
    <td>C</td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="2">Foo</td> 
 
    <script hidden></script> 
 
    <td>Bar</td> 
 
    <td>Baz</td> 
 
    </tr> 
 
    <tr hidden><td></td><td></td><td></td><td></td></tr> 
 
</table>