Как сделать такую простую таблицу?

Question

[Сергей]

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

Comments

[Ankhena]

Таблица должна быть адаптивной, значит без табличных тегов.

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

Answer 1

[Роман]

Открой тот же Bootstrap посмотри пример

Answer 2

[Дмитрий Гамзин]

Я так понял, Вы это имели ввиду?
CSS

<style type="text/css">
  .wrapper {
  display: grid;
  grid-template-columns: repeat(3, auto);
  max-width:  800px;
  border-color: #008a77;
}

.box {
  background-color: #fff;
  color: black;
  padding: 20px;
  font-size: 150%;
  }

  .grey-line {
    background-color: #c2c2c2;
  }

  .underline
  {
    border-bottom: 1.5px solid black;
  }
}
</style>

HTML

<div class="wrapper">
  <div class="box a underline">Колонка 1</div>
  <div class="box b underline">Колонка 2</div>
  <div class="box c underline">Колонка 3</div>
  
  <!-- Table Row -->
  <div class="box d grey-line">Короткий текст</div>
  <div class="box e grey-line">Какой-то очень длинный текст</div>
  <div class="box f grey-line">6565432367</div>
  
  <!-- Table Row -->
  <div class="box d">Короткий текст</div>
  <div class="box e">Какой-то очень длинный текст</div>
  <div class="box f">4353464789</div>

  <!-- Table Row -->
  <div class="box d grey-line">Короткий текст</div>
  <div class="box e grey-line">Какой-то очень длинный текст</div>
  <div class="box f grey-line">4647893263</div>

  <!-- Table Row -->
  <div class="box d">Короткий текст</div>
  <div class="box e">Какой-то очень длинный текст</div>
  <div class="box f">5757895322</div>
</div>