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

问题描述：

我有一行HTML表格。在那一行有3个单元格（td元素）。中心单元格包含页面的所有主要内容p个元素&。左边的&右边的td元素包含一个img元素;他们是左边&右侧蓝色列的图像。使HTML表格高度等于中间TD元素的高度

我的问题：我想让桌子的高度等于中心td元素的高度而已。而左边的&右边的图像将根据中心td元素的尺寸（高度）向下放大&。但现在，表格总是高度为1200px &那是因为左边的&右边的图像高度是1200px。

我希望这是有道理的&，你明白我在做什么：P 所以我试图使表的高度只与中心TD单元的高度相等。

有没有办法在纯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>

答

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

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

如果你想使用的表，我想这取决于你的图像内容的样子 - 他们应该垂直平铺如果页面变得太长了？它是否需要一定的宽度？这里有几个选项，但想知道你正在尝试构建什么将会有所帮助。这里有几个选项：

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

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

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

相关推荐