CODEWITHSUNDEEP
htmlcssinternet-explorerinternet-explorer-8
Trent
Trent

Reputation: 1109

HTML: Control individual row height in table with rowspan

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.

Upvotes: 3

Views: 3941

Answers (2)

Scrimothy
Scrimothy

Reputation: 2536

I think I'm understanding it. If you have a cell with no text in it initially, there is no height to that cell, but if you then add text to it, the cells below that one in the same column jump down to make room for the newly added text in cell (A1, for example).

If you add an   (encoded space) to your blank cells, you will have the height of one line of text in that cell without having to actually add visible content.

Upvotes: 1

daGUY
daGUY

Reputation: 28753

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

Upvotes: 2

Related Questions