How to display an unordered list as a table using CSS

In this article, you will learn how to display an unordered list as a table using the CSS column-count property.

Display unordered list as an HTML table. #

we can use the column-count property to display an unordered list as an HTML table.

<style>
.e-list{
  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;
  -webkit-column-gap: 0;
     -moz-column-gap: 0;
          column-gap: 0;
          list-style: none;
}
.e-list li{
  padding: 5px 10px;
  border:1px solid #bbb;
}
</style>

Output : #