HTML: Control individual row height in table with rowspan

Question

Suppose I have a table with 2 rows by 2 columns. I then merge the rows in the second column, and fill this column with several lines of text.

|------|------|
|      | text |
|------| text |
|      | text |
|------|------|

My browser (IE 8, standards mode) automatically sizes the rows in the first column to be equal heights. Adding lines to the second column increases the size of the rows in the first. Now when text is added to one of the rows in the first column, IE expands that row to contain the text and distributes the remaining height to the other row.

The problem is I want the text in the first column rows not to move when text is added to the second column. (Controls are shown or hidden dynamically using javascript, causing the left column to resize each time). I also want the text in the first column to sit at the top of its cell, and have the top left cell sized so there's no excess space between the text in cells 1 and 2.

|---------|--------|
|text     |text    |
|---------|        |
|text     |text    |
|         |text    |
|         |        |
|---------|--------|

Putting vertical-align:top on the top left cell will position the text in that cell where I want it, but the text in the cell below still appears too far down the page, since the actual size of these cells is being controlled by the renderer. Trying to set the height of the cell - style="height:100px;" doesn't seem to work either. I don't want to have to specify the heights manually - I just want IE to minimise the height of the top left cell so there's no excess space and the text doesn't move when text is added to the second column.

Answer 1

Do you have to use a table? An effect like this can probably be achieved more easily with CSS:

HTML:

<div class="row">
    <div class="col1">
        Row 1 Title                    
    </div>
    <div class="col2">
        Row 1 text<br />
        more text<br />
        even more text
    </div>
</div>
<div class="row">
    <div class="col1">
        Row 2 Title
    </div>
    <div class="col2">
        Row 2 text<br />
        more text<br />
        even more text<br />
        still more text
    </div>
</div>
<div class="row">
    <div class="col1">
        Row 3 Title
    </div>
    <div class="col2">
        Row 3 text<br />
        more text<br />
        even more text<br />
        still more text<br />
        yet another line of text
    </div>
</div>

​ CSS:

.row {
    margin-bottom: 10px;            
    overflow: hidden;
}
.col1, .col2 {
    float: left;
}
.col1 {
    margin-right: 10px;
}

JSFiddle