CODEWITHSUNDEEP
htmlcss
Krapatalin
Krapatalin

Reputation: 33

ul table with li table-cell

I want to show content on two columns (and two rows in my code) using display: table and display: table-cell.

HTML code:

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

and CSS:

ul {
  list-style-type: none;
  width: 100%;
  display: table;
  table-layout: fixed;
}
li {
  display: table-cell;
  width: 50%;
}

but I can't find any answer why does not work. Where am I wrong?

JSFiddle: https://jsfiddle.net/3Lwozhb9/

I need same height, with display: inline-block is no problem.

Upvotes: 1

Views: 31158

Answers (2)

mateos
mateos

Reputation: 1563

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

li {
  display: table-cell;
  width: 50%;
}
<ul>
  <li>1</li>
  <li>2</li>
</ul>
<ul>
  <li>3</li>
  <li>4</li>
</ul>

Both of the adjacent list items are the same height based on their content

Upvotes: 2

Paulie_D
Paulie_D

Reputation: 115385

It's not quite clear what order these li cells should be in but one option is use flexbox instead of display:table.

* {
  box-sizing: border-box;
}
ul {
  list-style-type: none;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
li {
  flex: 0 0 50%;
  border: 1px solid grey;
  padding: 1em;
  display: flex;
  align-items: flex-end;
}
<ul>
  <li>1.</li>
  <li>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque similique optio modi harum quas quae, libero provident dignissimos laboriosam et, inventore voluptatibus veritatis quos? Magnam.</li>
  <li>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, velit expedita? Rem eos nulla impedit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. A veniam, quidem. Nisi alias deserunt facilis unde repellendus praesentium esse in consequuntur,
    dolores natus reprehenderit incidunt culpa, repellat fugiat est quis!</li>
  <li>4.</li>
</ul>

Upvotes: 3

Related Questions