Dynamic cell spacing in HTML table

July 6, 2022

Okay so I don’t even know if this is possible, but I’m trying to accomplish the following design with the use of a <table>:

I know it would be easier to just use a <span> and not even bother with tables, but I figured a <table> would actually make sense here.

This is what I have so far:

table {
  text-align: left;
}

<table>
  <tr>
    <th>Population:</th>
    <td>334,300</td>
  </tr>
  <tr>
    <th>Region:</th>
    <td>Europe</td>
  </tr>
  <tr>
    <th>Capital:</th>
    <td>Reykjavík</td>
  </tr>
</table>

>Solution :

You could just set a display:flex on tr and it would do the job. Like so:

tr {
  display:flex;
}

<table>
  <tr>
    <th>Population:</th>
    <td>334,300</td>
  </tr>
  <tr>
    <th>Region:</th>
    <td>Europe</td>
  </tr>
  <tr>
    <th>Capital:</th>
    <td>Reykjavík</td>
  </tr>
</table>