Geek Answers Handbook

Same height scaling cells in html table

I am having problems with HTML tables when I do this project: The left cell is the rowspan = "2" cell, and the right one is the height = "50%" attributes. The following is the expected behavior:

  + ------------- + ----------------- +
     |  |  |
     |  |  Equal-height |
     |  |  cell # 1 |
     |  |  |
     |  Scaling- + ----------------- +
     |  height cell |  |
     |  |  Equal-height |
     |  |  cell # 2 |
     |  |  |
     + ------------- + ----------------- +

What is actually going on:

  + ------------- + ----------------- +
     |  |  Equal-height |
     |  |  cell # 1 |
     |  + ----------------- +
     |  |  |
     |  Scaling- |  |
     |  height cell |  Equal-height |
     |  |  cell # 2 |
     |  |  |
     |  |  |
     + ------------- + ----------------- +

In short, the upper part of the right two cells decreases as little as possible, and the lower part fills the rest of the space. There is an ugly workaround using embedded tables, but I was wondering if there was a more elegant solution. This can also be circumvented by assuming a fixed height for the left cell and forcing a size (in pixels) for the right cells. However, this defeats the goal of the zoom-height cell.

+4
source share
3 answers

To use height: tag 50%, the table must have a height. Again, the problem was that the element on the left was arbitrary. Thus, a fixed height (e.g. 150 pixels) can be a problem if the text on the left is less than 150 pixels. Thus, setting the height table 0px solved this problem.

<table height="0px" border="1px"> <tr> <td rowspan="2"> Blah<br> Blah<br> Blah<br> Blah<br> Blah<br> Blah<br> Blah<br> Blah<br> </td> <td height="50%"> Text </td> </tr> <tr> <td height="50%"> More text </td> </tr> </table>
0
source

Really late ... how about using javascript like this, where the height is the number you set?

 function SetCellHeight(height) { document.getElementById('ReferenceCell').style.height = height + 'px'; document.getElementById('Cell1').style.height = (0.5 * height) + 'px'; document.getElementById('Cell2').style.height = (0.5 * height) + 'px'; } <body onload="SetCellHeight(height)"> <table border=1> <tr> <td id="ReferenceCell" rowspan="2">First Column</td> <td id="Cell1">Cell #1</td> </tr> <tr> <td id="Cell2">Cell #2</td> </tr> </table>

Alternatively, the user can set the height as follows:

 function SetCellHeight() { var height = document.forms.tdHeightForm.heightinput.value.trim(); document.getElementById('ReferenceCell').style.height = height + 'px'; document.getElementById('Cell1').style.height = (0.5 * height) + 'px'; document.getElementById('Cell2').style.height = (0.5 * height) + 'px'; } <form id="tdHeightForm"><input type="text" name="heightinput"><button type="button" onclick="SetCellHeight()">Change Height</button></form>
+1
source 
 <table border=1> <tr> <td rowspan="2" style="height:300px;width:100px;text-align:center">First Column</td> <td style="height: 150px;width:100px;text-align:center">Cell #1</td> </tr> <tr> <td style="height:150px;width:100px;text-align:center">Cell #2</td> </tr> </table>
-1
source

More articles:


All Articles