JSFiddle - React, Tailwind, and code Playground

by cambraca

HTML

<h3>
This uses flexbox and looks beautiful as a single row (the space between each column is the same), but it's not a table.
</h3>

<div class="row">
  <div class="cell">one-word</div>
  <div class="cell">a bit larger content</div>
  <div class="cell">1245</div>
  <div class="cell">medium length</div>
</div>

<h3>
Here is the problem when you add more rows: the columns don't line up.
</h3>

<div class="row">
  <div class="cell">one-word</div>
  <div class="cell">a bit larger content</div>
  <div class="cell">1245</div>
  <div class="cell">medium length</div>
</div>

<div class="row">
  <div class="cell">another-word</div>
  <div class="cell">some other larger content</div>
  <div class="cell">124</div>
  <div class="cell">mid-length</div>
</div>

<h3>
This is a proper table, but it looks terrible. The space between the 2nd and 3rd columns is way too much, and too small between the 3rd and 4th.
</h3>

<table>
<tr>
  <td>one-word</td>
  <td>a bit larger content</td>
  <td>1245</td>
  <td>medium length</td>
</tr>
<tr>
  <td>another-word</td>
  <td>some other larger content</td>
  <td>124</td>
  <td>mid-length</td>
</tr>
</table>

CSS

.row {
  display: flex;
  border: 1px solid red;
}
.cell {
  flex-grow: 1;
  border: 1px solid pink;
}
table {
  width: 100%;
  border: 1px solid blue;
  border-spacing: 0;
}
td {
  border: 1px solid lightblue;
}