Dynamic cell spacing in HTML table-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

You can reset display values for th and td

table {
  text-align: left;
}
th,td {display:inline;}

<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>