Как выровнять высоту соответствующих дочерних элементов в несокльких блоках?

Question

[Mike & Bob]

Есть таблица вида:

<div class="table">	
	<div class="first-column">
		<ul class="data-list">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
	<div class="data-columns">
		<ul class="data-list">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<ul class="data-list">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
</div>

ul.data-list в данном случае являются столбцами таблицы, li - ячейками. В случае когда у li разная высота - все плывет. Соответственно задача - выровнять высоту у соответствующих :nth-child элементах списка, т.е. в рамках одной условной строки.

Пробовал jquery плагины типа matchHeight - не подходит, они выравнивают высоту только у соседних элементов в рамках одного родителя.

Comments

[Lynn «Кофеман»]

Не извращаться и сверстать таблицей

[Mike & Bob]

Алексей Тен: если бы все было так просто =)

[Lynn «Кофеман»]

zerxx: Ну, давайте подробности. Пока описание выглядит как «хочу сверстать таблицу без тега table»

Answer 1

[Илья]

Может так?

ul.data-list {
  display: table; 
  float: left;
}
ul.data-list li {
  display: table-cell;
}

Answer 2

[Сергей Шилов]

Блоку .data-list дать display: flex; и align-content: stretch;