Как сверстать таблицу на html?

Question

[khomaldi]

Здравствуйте. Мне нужно сделать вот такую таблицу. Нужна адаптивность (для смартфонов) и полное соответствие картинке. Какой инструмент лучше использовать для этого: table, div, flexbox, grid?
Если честно, я плохо дружу с flexbox и grid, поэтому эта вёрстка является поводом освоить один из этих инструментов. Пожалуйста, давайте обоснованные ответы. Спасибо =)

Comments

[Pavlo Marchenko]

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

Answer 1

[Кристина]

Вот тебе как путеводитель, дальше сам справишься, уверена. https://codepen.io/anon/pen/JaVJEg

<section class="table">
  <div class="table__header">
    <div class="table__heading">Order</div>
    <div class="table__heading">Date</div>
    <div class="table__heading">Name</div>
    <div class="table__heading">city</div>
    <div class="table__heading">payment status</div>
    <div class="table__heading">order status</div>
    <div class="table__heading table__heading--reverse">total</div>
  </div>
  
  <div class="table__row">
    <div class="table__data">1</div>
    <div class="table__data">2</div>
    <div class="table__data">3</div>
    <div class="table__data">4</div>
    <div class="table__data">5</div>
    <div class="table__data">6</div>
    <div class="table__data table__data--reverse">7</div>
  </div>
</section>

.table{
  background: #eee;
  padding: 0 10px 10px 10px;
}

.table__header{
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 10px;
}

.table__heading{
  flex-grow: 1;
  flex-basis: 100px;
  color: #aaa;
  text-transform: uppercase;
}

.table__heading--reverse{
  text-align: right;
}

.table__row{
  display: flex;
  align-items: center;
  height: 60px;
  background: #fff;
  box-shadow: 0 0 2px 0 #aaa;
  border-radius: 2px;
  padding: 0 10px;
}

.table__data{
  flex-grow: 1;
  flex-basis: 100px;
}

.table__data--reverse{
  text-align: right;
}

Answer 2

[Александр]

Я бы взял обычные div
Можно с сеткой бутстрап, так еще проще будет