まず、これは重複した質問です: Equal-height scaling cells in an html table
上記の質問をしたユーザーは、私が抱えている同じ問題の解決策を得られませんでした。
JSFIDDLE内に、背景が赤いセルがあります。このセルは最も高く、最も高いセルの高さを取得し、対応するセルの高さにまたがるには、他のすべてのセルが必要です。
これは動的でなければならないため、ソリューションに固定の高さを含めることはできません
ここに私が達成しようとしているもののモックアップがあります: http://jsfiddle.net/pAz6G/
HTMLは次のとおりです。
<table class="left" cellspacing="0" borderspacing="0" >
<tr>
<td>
<h2>Very Servere</h2>
<p>50m from high water on East Coast, 100m from high water on West Coast. Characterised by:</p>
<ul>
<li>Heavy salt deposits</li>
<li>The almost constant smell of saly spray in the air.</li>
<li>Close to breaking stuff (typically starts 50-100 metres) such as is found on exposed coasts.</li>
</ul>
<p>This environment may be extended inland by revailing winds and local coniditions</p>
</td>
</tr>
</table>
<table cellspacing="0" borderspacing="0" class="right">
<tr>
<td class="section">
<span class="section-heading">Applications</span>
<table class="inner">
<tr>
<td>Roofing</td>
</tr>
<tr>
<td>Roofing</td>
</tr>
<tr>
<td>Roofing</td>
</tr>
</table>
</td>
<td class="section">
<span class="section-heading">Applications</span>
<table class="inner">
<tr>
<td>Roofing</td>
</tr>
<tr>
<td>Roofing</td>
</tr>
<tr>
<td>Roofing</td>
</tr>
</table>
</td>
<td class="section">
<span class="section-heading">Applications</span>
<table class="inner">
<tr>
<td>Roofing</td>
</tr>
<tr>
<td class="red">Rain washing plus manual washing every 3 months</td>
</tr>
<tr>
<td>Roofing</td>
</tr>
</table>
</td>
</tr>
</table>
CSSは次のとおりです。
/* Column Styling */
.left {
float: left;
width: 350px;
}
.left td {
padding: 10px;
}
.right {
float: left;
width: 400px;
}
/*********************************************/
/* General Styling */
.no-padding {
padding: 0;
}
td {
background: grey;
color: white;
vertical-align: top;
}
p {
margin: 0;
}
.red {
background: red;
}
/*********************************************/
/* Section Styling */
.section {
border-left: 1px solid #fff;
}
.section-heading {
display: block;
padding: 10px;
}
/*********************************************/
/* Nested Tables */
.inner {
width: 100%;
}
.inner td {
border-top: 1px solid #fff;
padding: 10px;
}
/*********************************************/