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

Question

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

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

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

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

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

Answer 1

Вы можете использовать медиа-запрос и 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>