Блог

Главная - Вопросы по программированию - Есть ли способ произвольно расположить ячейки таблицы в ряд? (для адаптивного дизайна)

Есть ли способ произвольно расположить ячейки таблицы в ряд? (для адаптивного дизайна)

#css #layout #html-table

#css #макет #html-таблица

Вопрос:

Я бы хотел, чтобы таблица была немного отзывчивой (да, я знаю, что таблицы «не должны использоваться отзывчиво», но именно этим мы сейчас и занимаемся)

В частности, в таблице есть 4 маленьких связанных ячейки, которые нужно расположить 2×2, если экран достаточно маленький. Я могу заставить ячейки складываться с помощью display: block, но это укладывает их 4×1. Я хотел бы иметь возможность выборочно применять какой-либо стиль (я полагаю, ко 2-й (или 2nth) ячейке), чтобы заставить ее прерываться.

 td {
  display: block;
}

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

Есть ли лучший способ добиться эффекта в этой скрипке без td «ничего»?http://jsfiddle.net/2rLpme4s /

Комментарии:

1. Обязательно ли это должна быть таблица? Вы могли бы сделать это очень легко, используя CSS Grid.

2. @Nick устаревший код и сейчас нет времени на рефакторинг.

Ответ №1:

Это кажется немного странным, но вы могли бы довольно легко добиться этого, установив CSS grid позади медиа-запроса, чтобы прерывать отображение таблицы только при определенных условиях. Здесь я произвольно выбираю 40em. Измените размер вашего браузера, чтобы увидеть эффект, который я попытался прояснить с помощью некоторых дополнительных стилей, которые не являются необходимыми для данной техники:

 @media screen and (max-width: 40em) {  
  tr {
    display: grid;
  }

  td {
    grid-row: 1 / 3;
  }

  td.stat {
    grid-row: 1;
  }

  td.stat2 {
    grid-row: 2;
  }

  /* Extra styles just for clarity */
  table {
    width: 100%;
  }

  td {
    display: flex;
    align-items: center;
    justify-content: center;
    outline: 1px solid #ff00ff;
    padding: .5em;
  }
}  
 <table cellpadding="0" cellspacing="0">
  <tr>
    <td>A </td>
    <td>B </td>
    <td>C </td>
    <td class="stat">D </td>
    <td class="stat2">E </td>
    <td class="stat">F </td>
    <td class="stat2">G </td>
    <td>H </td>
  </tr>
</table>

Это работает путем установки ячеек данных таблицы так, чтобы они занимали расстояние от первой строки до начала третьей (1/3), то есть две строки, а затем с помощью селекторов .stat и .stat2 для установки каждой ячейки конкретно в первой или второй строке.