Отображение: свойство таблицы не работает, я хочу таблицу без использования элемента таблицы

Question

Я хочу создать таблицу, используя отображение свойства css: таблица, но не используя элемент таблицы. Также искал примеры, но это не помогло. Кто-нибудь может создать скрипку для таблицы, имеющей как минимум 3 строки и 3 столбца.

Answer 1

В этом примере показано использование следующих значений display:

• table
• table-row
• table-cell
• table-header-group
• table-row-group
• table-footer-group

div {
  padding: 5px;
}

#table {
  margin: 0 auto;
  display: table;
  border: 1px solid green;
}

.table-row {
  display: table-row;
}

.table-cell {
  width: 150px;
  text-align: center;
  display: table-cell;
  border: 1px solid black;
}

#thead {
  display: table-header-group;
  color: white;
  background-color: red;
}

#tbody {
  display: table-row-group;
  background-color: yellow;
}

#tfoot {
  display: table-footer-group;
  color: white;
  background-color: blue;
}

<div id='table'>
  <!-- table head -->
  <div id="thead">
    <div class="table-row">
      <div class="table-cell">head 1</div>
      <div class="table-cell">head 2</div>
    </div>
  </div>
  <!-- table body -->
  <div id="tbody">
    <div class="table-row">
      <div class="table-cell">cell 1.1</div>
      <div class="table-cell">cell 1.2</div>
    </div>
    <div class="table-row">
      <div class="table-cell">cell 2.1</div>
      <div class="table-cell">cell 2.1</div>
    </div>
  </div>
  <!-- table foot -->
  <div id="tfoot">
    <div class="table-row">
      <div class="table-cell">foot 1</div>
      <div class="table-cell">foot 2</div>
    </div>
  </div>
  <!-- table end -->
</div>