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

我有一个HTML表&我正在试图使其高度等于中间td元素的高度。顺便说一声抱歉，如果这被标记为我的其他问题的转贴，但我简化了我的HTML，所以有人会更容易阅读我的代码&帮助我。 PS：知道是否有更好的方法来实现我想要做的事情而不使用表格会很有趣。如何使这个表的高度等于中间td的高度

你知道我怎么能做到这一点（使用纯CSS或使用CSS &的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>

来源

2011-08-31 Marek

你有没有考虑过不使用表格并使用旧的css m方法来实现圆角+背景图像的阴影。开沟表会显着提高线数，是更好的练习。

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

来源

2011-08-31 07:25:51

为了实现你的高度对齐关心你应该改变你的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>

来源

2011-08-31 06:37:00

谢谢，但不会这也意味着左侧和右侧的图像不会缩放（高度）向上和向下？ – Marek

它们不会缩放，它们会垂直重复。 –

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

回答

相关问题