CSS:设置为tbody/thead时在Chrome中重复的渐变

Question

这里显示了我遇到的问题.基本上当我在thead上放一个渐变时,Chrome会重复这个渐变为永远的细胞...实际的期望结果是firefox产生的 - 整个thead的一个坚实的渐变.

有想法该怎么解决这个吗？

这是我的css:

thead.header {
    font-weight: bold;
    border-bottom: 1px solid #9C9C9C;
    background-repeat: no-repeat;
    background: #C6C6C6;
    background: -moz-linear-gradient(top, #DEDEDE 0%, #BDBDBD 80%, #BBB 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#DEDEDE), color-stop(80%,#BDBDBD), color-stop(100%,#BBB));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#DEDEDE', endColorstr='#BBB',GradientType=0 );
}

如果它有帮助,这是html:

  <table style="width:100%" cellpadding="0" cellspacing="0">
    <thead class="header">
      <tr>
        <th width="200px">Actor</th>
        <th rowspan="3">Character</th>
      </tr>
      <tr>
        <th>Gender</th>
      </tr>
      <tr>
        <th>Age</th>
      </tr>
    </thead>

    <tbody class="odd">
      <tr>
        <td width="200px">Test</td> 
        <td rowspan="3">Test</table>
        </td>
      </tr> 
      <tr>
        <td>Male</td>
      </tr> 
      <tr>
        <td>25</td>
      </tr>
    </tbody>
  </table>

Answer 1

设置background-attachment:fixed;在THEAD，它会正常工作

Answer 2

解决这个问题的一个方法是不使用单独的单元，而是使用单独的单元<br />。

我意识到这不是一个很好的解决办法。

您的代码： http: //jsbin.com/ozuhi5

您的代码已修复： http: //jsbin.com/ozuhi5/2

新的<thead>：

<thead class="header">
  <tr>
    <th width="200">
      Actor<br />
        Gender<br />
        Age
    </th>
    <th>Character</th>
  </tr>
</thead>