Столбцы с одинаковой высотой с CSS

Я хотел бы использовать процент для моей таблицы css. К сожалению, это не работает для меня.

Что не так с этим кодом? Должен ли я использовать flexbox вместо таблицы?

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

ul {
  list-style: none;
  margin: 0;
  display: table;
  table-layout: fixed;
  width: 100%;
}

li {
  width: 50%;
  display: table-cell;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

Ответы

Ответ 1

Вот пример с использованием элементов ul/li, 2 столбца с процентом и равной высоте.

Поскольку таблицы предпочитают раскладку table/row/cell, я немного изменил ваш html.

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.table {
  display: table;
  width: 90%;
  height: 60%;
  padding-top: 5%;
  margin: 0 auto;
}
ul {
  display: table-row;
  list-style: none;
  margin: 0;
}

li {
  display: table-cell;
  width: 50%;
  border: 1px solid #999;
}

<div class="table">
  <ul>
    <li>1</li>
    <li>2</li>
  </ul>
  <ul>
    <li>3</li>
    <li>4</li>
  </ul>
  <ul>
    <li>5</li>
    <li>6</li>
  </ul>
</div>

Ответ 2

Столбцы равной высоты с Flexbox

HTML

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

CSS

ul { display: flex; }

С помощью простого кода выше вы можете поместить любое количество контента в элемент списка, и все элементы списка будут иметь равную высоту.

DEMO

Примечания:

Исходная настройка контейнера flex flex-direction: row, что означает, что дочерние элементы (ака, гибкие элементы) будут line горизонтально.
Другой начальной настройкой контейнера flex является align-items: stretch, что приводит к тому, что элементы flex расширяют всю высоту (или ширину, в зависимости от flex-direction) контейнера.
Вместе обе приведенные выше настройки создают столбцы с одинаковой высотой.
Столбцы с одинаковой высотой Flex применяются только к братьям и сестрам.
Применение высоты к элементу flex отменяет функцию равной высоты.
Столбцы равной высоты применяются только к элементам flex в одной строке.
Как отключить столбцы с одинаковой высотой в Flexbox?

Поддержка браузера: Flexbox поддерживается всеми основными браузерами за исключением IE < 10. В некоторых последних версиях браузера, таких как Safari 8 и IE10, требуется префиксы поставщика. Для быстрого добавления префиксов используйте Autoprefixer. Подробнее в этом ответе.

Ответ 3

Я поднимаю ответ на интерпретацию вопроса, который отличается от @Michael_B. С начальным стилем width: 50%; в элементах li, я думаю, что желаемый результат состоит в том, чтобы шесть элементов списка входили в 2 столбца и 3 строки. Такой случай не может быть легко разрешен с использованием таблиц CSS, но относительно прост с flexbox.

ul {
  list-style: none;
  margin: 0;
  width: 100%;
  /*kills the irritating intial padding on uls in webkit*/
  -webkit-padding-start: 0;
  display: flex;
  flex-flow: row wrap;
  /*stretch is the default value, but it will force items to stretch to match others in their row*/
  align-items: stretch;
  /*below properties just emphasize the layout*/
  padding: 2px;
  background-color: green;
}
li {
  /*forces border-width and padding to be part of the declared with (50% in this case)*/
  box-sizing: border-box;
  width: 50%;
  /*list-item, inline-block, and block work equally well*/
  display: list-item;
  /*below properties just emphasize the layout*/
  border: white 2px solid;
  background-color: lightgreen;
}
/*I set this property to show what happens if 1 item has a different height*/

li:nth-child(3) {
  height: 40px;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>