0

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>
Geeky Quentin
  • 2,469
  • 2
  • 7
  • 28
Luca Phillips
  • 89
  • 6

2 Answers2

1

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>
dippas
  • 58,591
  • 15
  • 114
  • 126
0

Set the table height to min-content

<table style="height: min-content;"> ... </table>


<div style="display: flex">
  <canvas style="background-color: blue;"></canvas>
  <table style="height: min-content;">
    <tbody>
      <tr>
        <td>hi</td>
        <td>l</td>
      </tr>
      <tr>
        <td>lol</td>
      </tr>
  </table>
</div>
Geeky Quentin
  • 2,469
  • 2
  • 7
  • 28