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

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

0 голосов
/ 30 марта 2019

Я бы хотел, чтобы таблица была немного отзывчивой (да, я знаю, что таблицы "не следует использовать быстро", но сейчас мы здесь)

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

td {
  display: block;
}

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

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

1 Ответ

0 голосов
/ 30 марта 2019

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

@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, чтобы установить каждый из них в первую или вторую строку.

...