Как лучше сверстать такую таблицу?

Question

[Crushing]

prntscr.com/gf8te5 Как лучше всего сверстать такую таблицу? Говорят, что если делать с помощью tr th, то потом будут большие проблемы с адаптивностью.

Comments

[Руслан Галиев]

Верстайте tr th, никаких проблем с адаптивностью у такой таблицы быть не может.

Answer 1

[Никита]

Все зависит от того, как и кто будет менять данные в таблице.
Если строки генерятся из каких то данных, то можно и дивами, но зачем ...
Если у вас в админке визуальный редактор и там должна отображаться таблица, то конечно таблица.

Да и вообще, У вас 2 колонки, какие проблемы с адаптивностью.

Answer 2

[Максим]

<table style="width:100%;"> 
  <tr>
    <td colspan="12" class="col1">
      Основные даты
    </td>
  </tr>
  <tr>
    <td class="col2">25января</td>
    <td class="col3">Мой день рождения</td>
  </tr>
  <tr>
    <td  class="col2">27января</td>
    <td class="col3">Свадьба моей доченьки</td>
  </tr>
  <tr>
    <td  class="col2">29января</td>
    <td class="col3">День рождения сыночка | нам 5лет</td>
  </tr>
  <tr>
    <td colspan="12" class="col1">
      О футболе
    </td>
  </tr>
  <tr>
    <td  class="col2">2 февраля</td>
    <td class="col3">ЦСКА как всегда долбит СПАРТАК</td>
  </tr>
</table>

.col1{
  background:red;
  padding:10px 0;
  text-align:center;
  font-size:20px;
}
td.col2{
  background:#eee;
  padding:8px;
}
td.col3{
  background:yellow;
}

Это результат : https://codepen.io/simkaUser/pen/yoGPww?editors=1100

Answer 3

[Вадим Кот]

https://codepen.io/anon/pen/QMzaeb

Answer 4

[Андрей]

Проблемы с адаптивностью?
Ну это ели вы только захотите перестраивать таблицу к виду:

Дата
----------------------------
Событие
----------------------------
Дата
----------------------------
Событие

Тогда используйте Flexbox