CSS multi-row table without "display: table-row"

Question

I need to create a multi-row table without using display: table-row.

Because it is formatted from a template, and it is impossible to insert "row" code between "some" items. All items are the same.

What I need: 3 columns and 3 rows, and the same height for all columns.

If I remove float: left then all items is displayed in one row. With it, they all have different height.

HTML

<ul>
  <li>
    <p>ddd<br>ddd</p>
  </li>
  <li>
    <p>ddd</p>
  </li>
  <li>
    <p>ddd<br>ddd<br>ddd</p>
  </li>
  <li>
    <p>ddd</p>
  </li>
  <li>
    <p>ddd<br>ddd</p>
  </li>
  <li>
    <p>ddd<br>ddd<br>ddd</p>
  </li>
  <li>
    <p>ddd<br>ddd<br>ddd</p>
  </li>
  <li>
    <p>ddd</p>
  </li>
  <li>
    <p>ddd<br>ddd</p>
  </li>
</ul>

CSS

ul {
  display: table;
  width: 100%;
  height: 100%;
}

li {
  display: table-cell;
  height: 100%;
  width: 33%;
  float: left;
}

p {
  background: #eeeeee;
  margin: 2px;
  height: 100%;
}

http://jsfiddle.net/7ca4deko/

What is the question? What problem(s) are you facing while doing this? SO is not a platform to provide you code. It is meant for solving problems. — Waleed Iqbal
– Waleed Iqbal, Commented Mar 24, 2018 at 9:21
This is not a table. This is a list. Please see: developer.mozilla.org/en-US/docs/Web/HTML/Element/table — Richard Dunn
– Richard Dunn, Commented Mar 24, 2018 at 9:26

Punith Jain · Accepted Answer · 2018-03-24 09:34:59Z

1

try using display: flex

http://jsfiddle.net/dnomLjue/1/

ul {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

li {
  width: 33%;
  list-style-type: none;
}

p {
  background: #eeeeee;
  margin: 2px;
  height: calc( 100% - 2px);
}

<ul>
  <li>
    <p>ddd<br>ddd</p>
  </li>
  <li>
    <p>ddd</p>
  </li>
  <li>
    <p>ddd<br>ddd<br>ddd</p>
  </li>
  <li>
    <p>ddd</p>
  </li>
  <li>
    <p>ddd<br>ddd</p>
  </li>
  <li>
    <p>ddd<br>ddd<br>ddd</p>
  </li>
  <li>
    <p>ddd<br>ddd<br>ddd</p>
  </li>
  <li>
    <p>ddd</p>
  </li>
  <li>
    <p>ddd<br>ddd</p>
  </li>
</ul>

answered Mar 24, 2018 at 9:34

Punith Jain

1,6871 gold badge15 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS multi-row table without "display: table-row"

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related