HTML5: Можете ли вы визуализировать таблицу 20x1 как таблицу 10x2, используя только CSS?

Question

У меня есть стандартная таблица HTML, которая состоит из 20 строк и 1 столбца.

Таблица представляет собой стандартную HTML-таблицу «старой школы», состоящую из стандартных тегов таблицы:

<table>
  <thead></thead>
  <tbody>
    <tr><td>Row 1</td></tr>
    <tr><td>Row 2</td></tr>
    <tr><td>Row 3</td></tr>
    <tr><td>Row 4</td></tr>
    <!-- ... -->
    <tr><td>Row 19</td></tr>
    <tr><td>Row 20</td></tr>
  </tbody>
</table>

В этом приложении, вероятно, неправильно используется тег <table>, и его следовало сделать в формате <dl>, <dt>, <dd> ... но это обсуждение в другой раз.

Мне интересно, существует ли чистый метод CSS для преобразования таблицы из одного столбца в несколько столбцов, в частности из 10 строк и 2 столбцов, взяв мою текущую таблицу из этого формата:

+-----------+
|     1     |
+-----------+
|     2     |
+-----------+
|     …     |
+-----------+
|     20    |
+-----------+

В этом формате:

+-----------+-----------+
|     1     |     2     |
+-----------+-----------+
|     …     |     …     |
+-----------+-----------+
|     19    |     20    |
+-----------+-----------+

Answer 1

Абсолютно. Конечно, лучший способ - это семантический HTML для контента, но я знаю, что это не всегда возможно.

Самый простой способ изменить режим отображения элементов таблицы. Не зная точного макета, который у вас есть, я решил изменить его на простой гибкий блок, хотя вы можете использовать любые режимы отображения, которые соответствуют вашим потребностям. inline-block с фиксированной шириной, block с float: left и т. Д. Будут работать аналогично.

*{box-sizing:border-box}table{border:1px solid green}tr{border: 1px solid red}td{border: 1px solid blue}

tbody {
  width: 600px;
  display: flex;
  flex-wrap: wrap;
}

tr {
  flex: 50%;
}

<table>
  <tbody>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
    <tr><td>4</td></tr>
    <tr><td>5</td></tr>
    <tr><td>6</td></tr>
    <tr><td>7</td></tr>
    <tr><td>8</td></tr>
    <tr><td>9</td></tr>
    <tr><td>10</td></tr>
  </tbody>
</table>