HTML/CSS: How to justify multiple columns per list item - html

Question

I want to have multiple justified columns (fixed number of columns) for each list item, e.g.
- John 41 Singer
- Ringo 45 Drummer
can this be done with html/css? Perhaps an "li" class in CSS? It needs to be list items.

Answer 1

It's already been stated, but ideally this is a table of data and the right html for this should just be in a table. If you're against using a table in your html then the following solution should be fine. Update the container width for a wider layout.
Pen: https://codepen.io/joshuakelly/pen/dwBzdR
HTML:
<div class="wrapper">
<div class="row">
<div>John</div>
<div>41</div>
<div>Singer</div>
</div>
<div class="row">
<div>Ringo</div>
<div>45</div>
<div>Drummer</div>
</div>
</div>
<ul class="wrapper list">
<li class="row">
<div>John</div>
<div>41</div>
<div>Singer</div>
</li>
<li class="row">
<div>Ringo</div>
<div>45</div>
<div>Drummer</div>
</li>
</ul>
And the CSS
.wrapper {
display: flex;
flex-direction: column;
margin-bottom: 1em;
width: 300px
}
.wrapper.list {
list-style-type: none;
margin: 0;
padding: 0;
}
.row {
align-items: center;
display: flex;
justify-content: space-between;
}
.row div {
width: 33.33%
}

Answer 2

Just use a table...
<table>
<th>
<td>Name</td>
<td>Age</td>
<td>whateverelse</td>
</th>
<tr>
<td>John</td>
<td>45</td>
<td>i gues</td>
</tr>
</table>
Then use css to set fixed width for tabble and columns..
table {
border: 1px solid black;
table-layout: fixed;
width: 200px;
}
th, td {
border: 1px solid black;
width: 100px;
}
You could also, if your really in need it, just wrap the table inside the list like <ul><li><table>....</table></li></ul> That way you could style it anyway like you want using css...

Answer 3

List-version formatted as table and hacked to look also like a list (modified version of HermesTrismegistus ;)
ul.table-style {
display: table;
border: 1px solid black;
}
ul.table-style li:before {
display: list-item;
content: "";
}
ul.table-style li {
display: table-row;
}
ul.table-style span {
display: table-cell;
border: 1px solid black;
width: 100px;
}
<ul class="table-style">
<li>
<span>Name</span>
<span>Age</span>
<span>whateverelse</span>
</li>
<li>
<span>John</span>
<span>45</span>
<span>i gues</span>
</li>
</ul>