Html Question posted in
Some basic documentation can be found here.

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

I am trying to achieve this result:

Expected result

But I got this instead:

Current result

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

Tags:

2

Answers


  1. 0 
    <!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.

    Login or Signup to reply.
  2. 0

    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%;">
  <tbody>
    <tr>
      <td rowspan="2" style="background-color: red; ">
      </td>
      <td style="display: block; aspect-ratio: 1; background-color: green;">
      </td>
    </tr>
    <tr>
      <td style="display: block; aspect-ratio: 1; background-color: blue;">
      </td>
    </tr>
  </tbody>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search