Equal height columns with CSS

Question

I would like to use percentage for my css table. Unfortunately, it doesn\'t work for me.

What\'s wrong with this code? Should I use flexbox instead of table?

<

Answer 1

I'm throwing up an answer to an interpretation of the question that differs from @Michael_B. With the initial style of width: 50%; on the li elements, I'm thinking the desired result is to have the six list-items flow into 2 columns and 3 rows. Such a case cannot be readily solved using CSS tables but is relatively simple with 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;
}

  
1
  
2
  
3
  
4
  
5
  
6