Одна ячейка таблицы должна занимать всю ширину в другой строке - PullRequest
Новая
       82

Одна ячейка таблицы должна занимать всю ширину в другой строке

1 голос
/ 18 июня 2020

У меня есть разметка таблицы, которая выглядит следующим образом: 

-----------------
| a | b | c | d |
-----------------

В другой точке останова я бы хотел, чтобы ячейка 'd' сместилась ниже и go на всю ширину. 

-------------
| a | b | c |
-------------
|     d     |
-------------

Возможно ли это с css?

1 Ответ

2 голосов
/ 18 июня 2020

Вы можете использовать медиа-запрос и flexbox для переопределения стилей таблиц по умолчанию. 

table {
  border-collapse: collapse;
  display: block;
}

tr {
  display: flex;
  flex-wrap: wrap;
}

td {
  border: 1px solid #ddd;
  display: inline;
  flex: 1;
  padding: 5px 10px;
  text-align: center;
}

td.d {
  flex: 3;
  flex-basis: 100%;
}
<table>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td class="d">D</td>
  </tr>
</table>
...