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

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

Tags:

2

Answers


  1. 0

    Give height: 100%; to table. This will possibly 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>
    Login or Signup to reply.
  2. 0

    What’s the idea behind using divs with borders inside table cells?

    If you need a regular table with borders on every side and between cells both horizontally and vertically, you can simply add borders to the table and to every cell. Applying border-collapse: collapse; on the table tag prevents the doubling of inner borders between cells.

    If there’s a good reason for specifically using divs in your case, describe it, and possibly I’ll be able to help with that.

    <!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; border: 1px solid #000000;">
        <!-- First row -->
        <tr>
            <td style="padding: 0; border: 1px solid #000000;">
                    text
                    <br>
                    text
            </td>
            <td style="padding: 0; border: 1px solid #000000;">
                    text
            </td>
        </tr>

        <!-- Second row -->
        <tr>
            <td style="padding: 0; border: 1px solid #000000;">
                    text
                    <br>
                    text
            </td>
            <td style="padding: 0; border: 1px solid #000000;">
                    text
            </td>
        </tr>
    </table>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search