Question

我有一个HTML表＆amp;我试图使其高度等于中间的td元素高度。顺便说一句，如果这被标记为我的其他问题的转贴，我很抱歉，但我已经简化了我的HTML，因此有人可以更轻松地阅读我的代码＆amp;帮我。 PS：知道是否有更好的方法可以在不使用表格的情况下实现我想做的事情，这将会很有趣。

你知道我怎么做（使用纯CSS或使用CSS＆amp; javascript）吗？

如果你看看我的JSFiddle，你会发现我的问题非常简单（它有图片和所有东西），桌面高度只是大约300px而不是700左右。

http://jsfiddle.net/aFt2J/

<html>
<head>
    <style type="text/css">
    <!--
        html, body, div, form, fieldset, legend, label, img {  margin: 0;  padding: 0;  }  table {  border-collapse: collapse;  border-spacing: 0; }  th, td {  text-align: left;  }  h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; }  img { border: 0; } 

        body { background-color: red; }

        .contentTable        { height: inherit; }
        .contentRow          { 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; }

    -->
    </style>

</head>

<body>

    <div style="padding-left: 21%; width: 58%;">

        <!-- Top of Column -->
        <div class="tableTopPanel"><img src="http://www.kaz.net.au/images/temp/contentTopBk.png" width="100%" alt=""/></div>
        <table class="contentTable">
            <tr class="contentRow">
                <!-- Left Side of Column -->
                <td class="tableLeftPanel"><img src="http://www.kaz.net.au/images/temp/contentLeftBk.png" alt=""/></td>
                <!-- Middle of Column: where all the text is. The table height should equal this td elements height -->
                <td class="tableCentrePanel">
                    <img class="pageHeading" src="http://www.kaz.net.au/images/temp/coursesHeading2.png" width="100%" alt=""/>
                    <div class="pageContent">
                        <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>

                        <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>
                <!-- Right Side of Column -->
                <td class="tableRightPanel"><img src="http://www.kaz.net.au/images/temp/contentRightBk.png" alt=""/></td>
            </tr>
        </table>
        <!-- Bottom of Column -->
        <div class="tableBottomPanel"><img src="http://www.kaz.net.au/images/temp/contentBottomBk.png" width="100%" alt=""/></div>

    </div>

</body>
</html>

Answer 1

您是否考虑过不使用表格并使用旧的CSS方法来实现带有背景图像的圆角+阴影。开沟表将大大提高线数，是更好的做法。

请参阅jsfiddle，查看我为您创建的粗略示例。请注意，您需要更好地切割背景图像。

Answer 2

要完成高度对齐问题，您应该按如下方式更改CSS：

.tableLeftPanel { width: 6.25%; padding: 0; margin: 0; background:transparent url(http://www.kaz.net.au/images/temp/contentLeftBk.png) repeat-y; }
.tableRightPanel { width: 6.25%; padding: 0; margin: 0; background:transparent url(http://www.kaz.net.au/images/temp/contentRightBk.png) repeat-y; }

按如下方式更改左右列标记：

<!-- Left Side of Column -->
<td class="tableLeftPanel"></td>

<!-- Right Side of Column -->
<td class="tableRightPanel"></td>

如何使这个表的高度等于中间td的高度

2 个答案: