我如何修复每列的背景颜色高度...我为每列使用了不同的背景颜色。如果我在div中添加长文本而不是相同的行div的背景显示为空白。我需要在那里显示背景颜色。我试过身高:100%..但没有工作。我不能在高度上修复高度。 Becoz的一些文字很长。
<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>