адаптивная таблица в HTML / CSS с первой ячейкой, действующей как полная строка - PullRequest
Новая
       6

адаптивная таблица в HTML / CSS с первой ячейкой, действующей как полная строка

0 голосов
/ 26 февраля 2019

Мне нужно создать адаптивную таблицу в HTML / CSS.Мне нужно, чтобы первая ячейка строки действовала как полный ряд, когда пространство становится тесным, как показано ниже.В любой ситуации столбцы (c2, c3, c4) должны оставаться вертикально выровненными (ячейки одна под другой), как обычная таблица.Есть идеи?

Обычный вид: 

+-----------------------+--------+------+------+
|           c1          |   c2   |   c3 |  c4  |
+-----------------------+--------+------+------+

Мобильный вид: 

+---------------------+
|           c1        |
+---------+------+----+
|   c2    |   c3 | c4 |
+---------+------+----+
|           c1        |
+---------+------+----+
|   c2    |   c3 | c4 |
+---------+------+----+

Ответы [ 2 ]

0 голосов
/ 26 февраля 2019

Да, это возможно с медиа-запросами, но этот конкретный подход уродлив и требует дублирования.

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

#table {
  width: 100%;
}

.mRow {
  display: none;
}

@media (max-width: 500px) {
  .mRow {
    display: table-row;
  }
  .dCell {
    display: none;
  }
}
<table id="table" cellspacing="0" border="1">
  <!-- this row is hidden by default, shown with a media query -->
  <tr class="mRow">
    <td colspan="3">C1</td>
  </tr>
  <tr>
    <!-- this cell hidden on mobile with a media query -->
    <td class="dCell">C1</td>
    <td>C2</td>
    <td>C3</td>
    <td>C4</td>
  </tr>
  <!-- this row is hidden by default, shown with a media query -->
  <tr class="mRow">
    <td colspan="3">C1</td>
  </tr>
  <tr>
    <!-- this cell hidden on mobile with a media query -->
    <td class="dCell">C1</td>
    <td>C2</td>
    <td>C3</td>
    <td>C4</td>
  </tr>
</table>
0 голосов
/ 26 февраля 2019

Это можно сделать с помощью макета сетки .

. Здесь я использую JavaScript для включения и выключения классов, чтобы показать, как стиль может измениться.Тем не менее, вы можете добиться того же эффекта с помощью медиазапросов, не определяя стили span.mobile и .grid.mobile, если размер больше указанной точки останова.

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

const elements = document.querySelectorAll('.mobile');
setInterval(() => {
  elements.forEach(el => el.classList.toggle('mobile'));
}, 1000);
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid black;
  border-right: 1px solid black;
}

/* toggle below style with a media query */
.grid.mobile {
  grid-template-columns: repeat(3, 1fr);
}

.grid > span {
  padding: 4px 4px;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
}

/* toggle below style with a media query */
span.mobile {
  grid-column: 1 /4;
  font-weight: bold;
  text-align: center;
}
<div class="grid mobile">
  <span class="mobile">c1</span>
  <span>c2</span>
  <span>c3</span>
  <span>c4</span>
  <span class="mobile">c1</span>
  <span>c2</span>
  <span>c3</span>
  <span>c4</span>
  <span class="mobile">c1</span>
  <span>c2</span>
  <span>c3</span>
  <span>c4</span>
</div>
...