各列の背景色の高さを修正する方法...列ごとに異なる背景色を使用しました。同じ行の div よりも長いテキストを div に追加した場合、div の背景は空白で表示されます。そこに背景色を表示する必要があります。height:100% を試しましたが、機能しません。高さをサイズで固定することはできません。テキストの一部が非常に長いためです。
<style type="text/css">
.divTable
{
font-family:Arial; font-size:12px;
display: table;
width: 685px;
border:1px solid #666666;
border-spacing:1px;
/*cellspacing:poor IE support for this*/
/* border-collapse:separate;*/
}
.headRow
{
background:#D8DEEA;
display:table-row;
}
.divRow
{
display:table-row;
width:auto;
}
.bgColorGray
{
background:#ccc;
}
.bgColorf2
{
background:#E0E0E0;
}
.bgColorEA
{
background:#EAE9E9;
}
.bgColorf5
{
background:#f5f5f5;
}
.divCell
{
float:left;/*fix for buggy browsers*/
display:table-column;
width:150px;
padding: 10px;
height:100%;
}
.divCellTitle
{
float:left;/*fix for buggy browsers*/
display:table-column;
width:150px;
text-align:center;
font-weight:bold;
}
</style>
<div class="divTable">
<div class="headRow">
<div class="divCellTitle">Company</div>
<div class="divCellTitle">Q1</div>
<div class="divCellTitle">Q2</div>
<div class="divCellTitle">Q3</div>
</div>
<div class="divRow ieclear">
<div class="divCell bgColorGray">Microsoft</div>
<div class="divCell bgColorf2"></div>
<div class="divCell bgColorEA">50.2</div>
<div class="divCell bgColorf5">30.2</div>
</div>
<div class="divRow ieclear">
<div class="divCell bgColorGray">Google</div>
<div class="divCell bgColorf2">30.2</div>
<div class="divCell bgColorEA">50.2</div>
<div class="divCell bgColorf5">Test Line Test Line Test lien line two </div>
</div>
<div class="divRow ieclear">
<div class="divCell bgColorGray">Microsoft</div>
<div class="divCell bgColorf2"></div>
<div class="divCell bgColorEA">50.2</div>
<div class="divCell bgColorf5">30.2</div>
</div>
<div class="divRow ieclear">
<div class="divCell bgColorGray">Google</div>
<div class="divCell bgColorf2">30.2</div>
<div class="divCell bgColorEA">50.2</div>
<div class="divCell bgColorf5">Test Line Test Line Test lien line two </div>
</div>
</div>