使HTML Table高度等于中间TD元素的高度

Question

I have a HTML table with 1 row. In that row there are 3 cells(td elements). The centre cell contains p elements & all the main content of the page. The left & right td elements contain an img element; they are images of the left & right sides blue column.

My Problem: I am trying to make the height of the table be equal to the height of the centre td element only. And the left & right images will scale up & down according to the dimensions(height) of the centre td element. But right now, the table is always 1200px in height & thats because the left & right images are 1200px in height.

I hope this makes sense & that you understand what I am attempting to do :P So I am tryinging to make the table height equal to the height of the centre td cell only.

Is there a way to do this in pure HTML & CSS. If not javascript will do it wont it?

.contentTable        { height: inherit; }
.tableTopPanel       { height: 6.25%; }
.tableBottomPanel    { height: 6.25%; }
.tableLeftPanel      { width: 6.25%; padding: 0; margin: 0; }
.tableRightPanel     { width: 6.25%; padding: 0; margin: 0; }
.tableCentrePanel    { background-color: #FFFFFF; }
.pageContent         { border-color: #99CCFF; border-width:thin; border-style:solid; border-right-width:thick;
                       border-bottom-width:thick; padding-top: 0.5em; border-top: 0; }

<table class="contentTable" id="test">
    <tr>
        <td class="tableLeftPanel"><img src="../Images/contentLeftBk.png" alt=""/></td>

        <td class="tableCentrePanel">
            <img class="pageHeading" src="Images/coursesHeading2.png" width="100%" alt=""/>
            <div class="pageContent" id="coursesContent">
                <p>Kazcare cooperates with <a href="http://www.weaillawarra.com/index.html">WEA Illawarra</a> to offer a range of educational courses.</p>
                <p>Some of the courses held at Kazcare Education Facilities include: </p>

                <ul class="leftCol">
                    <li>Front Line Management Courses</li>
                    <li>Cert 4 Training &amp; Assessment</li>
                    <li>Environment Courses</li>
                    <li>Music Appreciation</li>
                    <li>Craft Classes</li>
                    <li>Candle Making</li>
                </ul>
                <ul class="rightCol">
                    <li>Art Classes</li>
                    <li>Drawing Classes</li>
                    <li>Yoga</li>
                    <li>Dancing</li>
                    <li>Exercise Classes</li>
                    <li>Art History Classes</li>
                </ul>

                <br/>
                <p class="a">
                    To view the full range of WEA Illawarra courses held at KazCare please visit <a href="http://enrol.weaillawarra.com/index.html">WEA Illawarra Courses</a>.
                </p>
            </div>
        </td>

        <td class="tableRightPanel"><img src="../Images/contentRightBk.png" alt=""/></td>
    </tr>
</table>

Answer 1

If I were implementing a layout like this, I would likely rely on pure CSS instead of using a table. There are numerous examples of three column layouts online, here's one example:

http://www.manisheriar.com/holygrail/index.htm

If you want to use the table, I suppose it depends on what the contents of your images look like - should they be vertically tiled if the page gets too long? Does it need to be a certain width? There are a few options here, but having an idea of what you're trying to build would help. Here are a few options:

• Use the background-image property of CSS - http://www.w3schools.com/cssref/pr_background-image.asp
• Set a fixed width on the outer TD elements, and set overflow to hidden: http://www.w3schools.com/cssref/pr_pos_overflow.asp

Hope this helps, happy coding!