Question

I want to accomplish the following using only CSS and HTML, and not use JavaScript.

I have a simple HTML table that looks like this. Both columns contain dynamic content, but the left has a scrollable div. I want the display height of that scrollable div to size according to the table, and have the table size be set only by the dynamic height of column2.

<table>
    <tr>
        <td class="column1">
            <div>
            ...
            </div>
        </td>
        <td class="column2">
            <div>
            ...
            </div>
        </td>
    </tr>
</table>

I want the table to adjust its height according to dynamic content in column2 only, not column1, so that I can have a scrollable div in column1 that sizes to the height of the table set by column2 automatically when the page is rendered.

I have found solutions using jQuery, but the performance is very poor when I use height() or outerHeight() to find the height of the right column and set the div inside the left column appropriately, especially when the right column contains a large number of HTML elements which are in their own scrollable divs.

Answer 1

You can use absolute positioning:

table {
    position: relative;
}

td {
    background: red;
    width:200px;
}

.column1>div {
    height:100%;
    overflow: auto;
    position: absolute;
    top:0;
    width:200px;
}

<link rel="stylesheet" href="del.css">
<table>
    <tr>
        <td class="column1">
            <div>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>Text
            </div>
        </td>
        <td class="column2">
            <div>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>Text
            </div>
        </td>
    </tr>
</table>

Also available as a jsfiddle.