Scaling table cell height

Question

Firstly, this is a duplicate question: Equal-height scaling cells in an html table

The user that asked the question above didn't get a solution for the same issue I'm having.

Within the JSFIDDLE you will notice a cell with a red background. This cell is the highest and I need all other cells to pick up the highest cell height and span to the corresponding cell height.

The solution cannot contain fixed heights as this must be dynamic

Here is a mock up of what I'm trying to achieve: http://jsfiddle.net/pAz6G/

Here is HTML:

<table class="left" cellspacing="0" borderspacing="0" >
    <tr>
        <td>            
            <h2>Very Servere</h2>
            <p>50m from high water on East Coast, 100m from high water on West Coast. Characterised by:</p>
            <ul>
                <li>Heavy salt deposits</li>
                <li>The almost constant smell of saly spray in the air.</li>
                <li>Close to breaking stuff (typically starts 50-100 metres) such as is found on exposed coasts.</li>
            </ul>
            <p>This environment may be extended inland by revailing winds and local coniditions</p>         
        </td>
    </tr>
</table>
<table cellspacing="0" borderspacing="0" class="right">
    <tr>
        <td class="section">
            <span class="section-heading">Applications</span>
            <table class="inner">
                <tr>
                    <td>Roofing</td>
                </tr>
                <tr>
                    <td>Roofing</td>
                </tr>
                <tr>
                    <td>Roofing</td>
                </tr>
            </table>
        </td>
        <td class="section">
            <span class="section-heading">Applications</span>
            <table class="inner">
                <tr>
                    <td>Roofing</td>
                </tr>
                <tr>
                    <td>Roofing</td>
                </tr>
                <tr>
                    <td>Roofing</td>
                </tr>
            </table>
        </td>
        <td class="section">
            <span class="section-heading">Applications</span>
            <table class="inner">
                <tr>
                    <td>Roofing</td>
                </tr>
                <tr>
                    <td class="red">Rain washing plus manual washing every 3 months</td>
                </tr>
                <tr>
                    <td>Roofing</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Here is CSS:

/* Column Styling */

.left {
    float: left;
    width: 350px;
}

    .left td {
        padding: 10px;
    }

.right {
    float: left;
    width: 400px;
}
/*********************************************/

/* General Styling */

.no-padding {
    padding: 0;
}

td {
    background: grey;
    color: white;
    vertical-align: top;
}

p {
    margin: 0;
}

.red {
    background: red;
}

/*********************************************/

/* Section Styling */

.section {
    border-left: 1px solid #fff;
}

.section-heading {
    display: block;
    padding: 10px;
}

/*********************************************/

/* Nested Tables */

.inner {
    width: 100%;
}

.inner td {
    border-top: 1px solid #fff;
    padding: 10px;
}

/*********************************************/

I've reviewed this further with my colleagues and have come up with a solution. I will post a working solution once it's completed. The thinking we have is the cells that need the same height - they need to be within the same table context - currently they are individual so cannot pick up each others cell height. — Filth, Sep 04 '13 at 21:52

score 1 · Accepted Answer · answered Sep 04 '13 at 21:59

1

Instead of using multiple tables, try using one table.

Keeping it simple :)

answered Sep 04 '13 at 21:59

Hamish Rouse

602
1
7
16

Scaling table cell height

1 Answers1