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

Question

我遇到的问题显示在这里。基本上，当我在头部上放置渐变时，Chrome 会为每个单元格重复该渐变...实际所需的结果是 Firefox 生成的结果 - 整个头部的固体渐变。

有关如何解决此问题的任何想法？

这是我的 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; 就可以正常工作了

Answer 2

这是一个不幸的问题，但有一个适用于大多数布局的简单解决方法：

在表格本身上设置渐变，并为 提供纯色。

小提琴：http://jsfiddle.net/vudj9/

Answer 3

我相信这是因为 background 样式无法应用于 thead 元素。

Answer 4

将渐变应用于第 th 元素而不是 thead 并使用 rowspan 属性选择器似乎可行。如果两个标题行的高度是灵活的，那么这种方法就不太有效，因为您需要知道示例中的中间范围颜色#7E7E7E。查看示例 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, #ccc, #333);
      background-repeat: repeat-x;
   }

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

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

Answer 5

如果您为标题指定 display: table-caption; 的值，它就会起作用。

需要一些额外的 CSS 来定位第 th 内容。

thead.header {
  display: table-caption;
  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);
}

thead.header th {
  text-align: center;
}

<table style="width:100%" cellpadding="0" cellspacing="0">
  <thead class="header">
    <tr>
      <th width="200px">Actor<br><br></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</td>
    </tr>
    <tr>
      <td>Male</td>
    </tr>
    <tr>
      <td>25</td>
    </tr>
  </tbody>
</table>

Answer 6

嗯，解决这个问题的一个方法是不使用单独的单元格，而是使用
。

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

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

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

新 ：

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

Answer 7

这是 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, black, white);
    background-image: -o-linear-gradient(270deg, black, white);
    background-image: linear-gradient(to bottom, black, white);

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

请参阅此演示