Make div to stretch vertically when the content of cells in the same row can be of different height

Consider the folloing 2-by-2 html table:

<table style="width: 100%; border-collapse: collapse; table-layout: fixed;">
  <!-- First row -->
  <tr>
    <td style="padding: 0;"> 
      <div style="width: 100%; height: 100%; border: 1px solid black; box-sizing: border-box;">
        text
        <br> 
        text
      </div>
    </td>
    <td style="padding: 0;"> 
      <div style="width: 100%; height: 100%; border: 1px solid black; box-sizing: border-box;">
        text 
      </div>
    </td>
  </tr>
  
  <!-- Second row -->
  <tr>
    <td style="padding: 0;">
      <div style="width: 100%; height: 100%; border: 1px solid black; box-sizing: border-box;">
        text
        <br> 
        text
      </div>
    </td>
    <td style="padding: 0;"> 
      <div style="width: 100%; height: 100%; border: 1px solid black; box-sizing: border-box;">
        text 
      </div>
    </td>
  </tr>
</table>

Each cell contains a div with borders. I want the divs to stretch to fill the entire cell so the div borders will touch each other. I have putted the height of all the divs to be 100%, but still on the second column they do not stretch up.

What should I do?

I asked this question chatgpt. he gave me planty of useless sujestions.

It is related There is also this question: How do I stretch a div vertically in a td? but the answr thier do not work in my case.

Solution

Give height: 100%; to table. This will fix this issue.

<!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 style="width: 100%; border-collapse: collapse; table-layout: fixed;height: 100%;">
        <!-- First row -->
        <tr>
            <td style="padding: 0;">
                <div style="width: 100%; height: 100%; border: 1px solid black; box-sizing: border-box;">
                    text
                    <br>
                    text
                </div>
            </td>
            <td style="padding: 0;height: 100%;">
                <div style="width: 100%; height: 100%; border: 1px solid black; box-sizing: border-box;">
                    text
                </div>
            </td>
        </tr>

        <!-- Second row -->
        <tr>
            <td style="padding: 0;">
                <div style="width: 100%; height: 100%; border: 1px solid black; box-sizing: border-box;">
                    text
                    <br>
                    text
                </div>
            </td>
            <td style="padding: 0;">
                <div style="width: 100%; height: 100%; border: 1px solid black; box-sizing: border-box;">
                    text
                </div>
            </td>
        </tr>
    </table>
</body>

</html>