2 column table with rowspan = 2 and aspect ratio 1/1

45 Views Asked by Youssef Ghrib At 22 February 2024 at 06:55

I am trying to achieve this result:

But I got this instead:

<table class="table" style="width: 100%;">
  <tbody>
    <tr>
      <td rowspan="2" style="display: inline-block; width: 50%; aspect-ratio: 1/2;">
      </td>
      <td style="display: inline-block; width: 50%; aspect-ratio: 1/1;">
      </td>
    </tr>
    <tr>
      <td style="display: inline-block; width: 50%; aspect-ratio: 1/1;">
      </td>
    </tr>
  </tbody>
</table>

Any ideas on how to achieve a 1/1 table with rowspan = 2? My search showed that rowspan and inline-block do not play nicely with each other. But no fix/alternative was suggested.

Original Q&A

There are 2 best solutions below

anoncephal On 22 February 2024 at 08:40

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table class="table" style='width: 100%; border: 2px solid orange;'>
        <tbody>
          <tr>
            <td rowspan="2" style="width: 50%; aspect-ratio: 1/2; border: 2px solid black;">
                11
            </td>
            <td style="width: 50%; aspect-ratio: 1/1; border: 2px solid red;">
                11
            </td>
          </tr>
          <tr>
            <td style="width: 50%; aspect-ratio: 1/1; border: 2px solid green;">
                11
            </td>
          </tr>
        </tbody>
      </table>
</body>
</html>

I have removed inline block as it was keeping the layout in inline.

A Haworth On 22 February 2024 at 08:55

If you give the two square cells aspect-ratio: 1 and display: block then then the rowspan=2 will pick up the correct height without having to specify it.

<table class="table" style="width: 100%; border: 1px solid black; box-sizing: border-box;border-collapse: collapse">
  <tbody>
    <tr>
      <td rowspan="2" style="border-right: 1px solid black;">
      </td>
      <td style="display: block; aspect-ratio: 1;">
      </td>
    </tr>
    <tr>
      <td style="display: block; aspect-ratio: 1; border-top: 1px solid black;">
      </td>
    </tr>
  </tbody>
</table>

2 column table with rowspan = 2 and aspect ratio 1/1

There are 2 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in HTML-TABLE

Related Questions in TWITTER-BOOTSTRAP-3

Trending Questions

Popular # Hahtags

Popular Questions