我有一行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 & 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>