Equal-height scaling cells in an html table

Question

I'm having some trouble with HTML tables when I make this design: The left-hand cell is a rowspan="2" cell, and the right two are using height="50%" attributes. Below is the expected behavior:

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

What actually happens:

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

In short, the top of the right-hand two cells is reduced as small as possible, and the bottom one 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-hand cell, and forcing the size (in pixels) for the right-hand cells. This defeats the purpose of a scaling-height cell, though.

you could use a div layout instead,,. here's a somewhat messy version - http://jsfiddle.net/Kx6w4/ — lukeocom, Feb 25 '13 at 01:15
Current experiments with table-layout:fixed are not working, I've tried it in the table-header and table rows.
Divs don't scale, so that solution doesn't work. — jbzdarkid, Feb 25 '13 at 21:43
Table-layout:fixed is only for width--although semi-useful is not the problem here. — jbzdarkid, Nov 21 '13 at 19:59

score 1 · Answer 1 · answered Apr 14 '14 at 04:52

Really late...how about using javascript as follows where height is a 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 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>

Unfortunately this was on a wiki, so javascript wasn't allowed. I did in fact solve this problem by adding a height:0px to the parent cell-this was clearly not going to effect the height of the cell, but did allow the percentage-based scaling to work properly. — jbzdarkid, Apr 14 '14 at 09:32

score 0 · Accepted Answer · answered Sep 29 '14 at 01:01

To use the height:50% tag, the table needed to have a height. Again, the problem was to due with the element on the left being arbitrarily-sized. So, a fixed height (say 150px) might be a problem if the text on the left was less than 150 px. Thus, setting a 0px height table 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>

score -1 · Answer 3 · answered Apr 12 '13 at 10:44

-1

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

answered Apr 12 '13 at 10:44

sachq

672
7
11

As I said, I don't want to use fixed-height. Thus, this is not a solution. – jbzdarkid Apr 15 '13 at 16:02

Equal-height scaling cells in an html table

3 Answers3

Linked