CSS：当设置为tbody / thead时，渐变会在Chrome中重复出现

问题描述

|| 这里显示我遇到的问题。基本上，当我在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>

    

解决方法

        在thead上设置

background-attachment:fixed;

，它将正常工作     ,        这是一个不幸的问题，但是有一个简单的解决方法适用于大多数布局： 在桌子上设置渐变色，并使3成为纯色。 小提琴：http：//jsfiddle.net/vudj9/     ,        我相信这是因为

background

样式无法应用于

thead

元素。     ,        将渐变应用于

th

元素而不是

thead

并使用

rowspan

属性选择器似乎可行。如果两个标题行的高度是灵活的，那将无法很好地工作，因为您需要在示例中知道中间范围颜色“ 9”。查看示例http://jsfiddle.net/wSWF9/2/

   table {
       border: 1px solid #ccc;
       border-collapse: collapse;
   }

   table thead th[rowspan=\"2\"] {
      background-image: linear-gradient(to bottom,#ccc,#333);
      background-image: -webkit-linear-gradient(top,#333);
      background-repeat: repeat-x;
   }

   table thead tr th {
      background-image: linear-gradient(to bottom,#7E7E7E);
      background-repeat: repeat-x;
   }

   table thead tr + tr th {
      background-image: linear-gradient(to bottom,#7E7E7E,#333);
      background-repeat: repeat-x;
   }

    ,        如果为thead赋予ѭ11的值，则它起作用。 需要一些额外的CSS来放置

th

内容。 http://jsfiddle.net/4vnpC/     ,        嗯，一种解决该问题的方法是不使用单独的单元格，而是使用

<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>

    ,        这是Google chrome的错误，请在此Google页面上了解有关Chrome问题的更多信息。 尝试样式化tbody元素时，我确实遇到了相同的问题，这是我用来修复代码而不破坏其他浏览器支持的解决方案：

table>tbody {
    background-image: -moz-linear-gradient(270deg,black,white); /* keep the right code     for other browsers */
    background-image: -ms-linear-gradient(270deg,white);
    background-image: -o-linear-gradient(270deg,white);
    background-image: linear-gradient(to bottom,white);

    background-color: transparent; /* needed for chrome*/
    background-image:-webkit-linear-gradient(0deg,rgba(0,0),0)); /*del the linear-gradient on google chrome */
}
table {  /*fix tbody issues on google chrome engine*/
    background-image: -webkit-linear-gradient(270deg,0) 39px,black 0px,white ); /* 359px is the calculated height of the thead elemx */
    border-spacing: 0; /*delete border spacing */
}

观看此小提琴上的演示