Table has huge space when is child of div flex

July 5, 2022

I’m trying to put an HTML table on the right side of a canvas and for some reason, it has huge spaces between rows.

I’ve tried the solution here
and here but none of them solved the problem.

Here’s my current code:

<html>

<body style="margin: 0px">
  <div style="display: flex">
    <canvas style="background-color: blue;"></canvas>
    <table>
      <tbody>
        <tr>
          <td>hi</td>
          <td>l</td>
        </tr>
        <tr>
          <td>lol</td>
        </tr>
    </table>
  </div>
</body>

</html>

>Solution :

Solution 1 – Set `align-items: flex-start` in `div` because the default value is `stretch`

div {
  display: flex;
  align-items: flex-start;
}

canvas {
  background-color: blue;
}

table {
  border: 1px solid red;
}

<div>
  <canvas></canvas>
  <table>
    <tbody>
      <tr>
        <td>hi</td>
        <td>l</td>
      </tr>
      <tr>
        <td>lol</td>
      </tr>
  </table>
</div>

Solution 2 – Set `align-self: flex-start` in `table`

div {
  display: flex;
}

canvas {
  background-color: blue;
}

table {
  border: 1px solid red;
  align-self: flex-start
}

<div>
  <canvas></canvas>
  <table>
    <tbody>
      <tr>
        <td>hi</td>
        <td>l</td>
      </tr>
      <tr>
        <td>lol</td>
      </tr>
  </table>
</div>