Question

我有一个包含1行的HTML表格。在该行中有3个单元格（td元素）。中心单元包含p个元素＆amp;页面的所有主要内容。左边＆amp; right td元素包含一个img元素;它们是左图和左图的图像。右侧蓝色柱。

我的问题：我试图让表格的高度仅等于中心td元素的高度。左边和左边正确的图像将放大＆amp;根据中心td元素的尺寸（高度）向下。但是现在，桌子的高度始终是1200px＆amp;那是因为左边和左边的右图像的高度为1200像素。

我希望这是有道理的＆amp;你明白我想要做什么：P 所以我试图让表高度只等于中心td单元的高度。

有没有办法在纯HTML和HTML中执行此操作CSS。如果不是javascript会这样做吗？

.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

如果我实现这样的布局，我可能会依赖纯CSS而不是使用表格。在线有三个列布局的例子，这里有一个例子：

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

如果您想使用该表，我认为这取决于图像的内容是什么样的 - 如果页面太长，它们是否应垂直平铺？它需要一定的宽度吗？这里有一些选项，但了解您正在尝试构建的内容会有所帮助。以下是一些选项：

使用CSS的background-image属性 - http://www.w3schools.com/cssref/pr_background-image.asp
在外部TD元素上设置固定宽度，并将overflow设置为隐藏：http://www.w3schools.com/cssref/pr_pos_overflow.asp

希望这有帮助，快乐编码！

使HTML表格高度等于中间TD元素高度

1 个答案: