如何在“display:table-column”上修复背景颜色

时间:2012-09-18 08:12:43

标签: css tablecolumn

我如何修复每列的背景颜色高度...我为每列使用了不同的背景颜色。如果我在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>

0 个答案:

没有答案