CSS: Gradients repeating in Chrome when set to tbody/thead

The problem I am having is shown here. Basically when I put a gradient on a thead, Chrome repeats that gradient for ever cell... The actual desired result is what firefox produced - a solid gradient for the whole thead.

Any ideas on how to fix this?

Here is the css I have:

thead.header {
    font-weight: bold;
    border-b开发者_StackOverflowottom: 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 );
}

Here is the html if it helps:

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

Set background-attachment:fixed; on thead and it will work fine

This is an unfortunate problem, but there is a simple work-around that will work for most layouts:

Set the gradient on the table itself, and give the <td>s a solid color.

fiddle: http://jsfiddle.net/vudj9/

I believe that's because the background style can't be applied to the thead element.

Applying the gradient to the th element instead of the thead and using the rowspan attribute selector seems to work. This wouldn't work so well if the height of the two header rows were flexible as you need to know the middle range color #7E7E7E in the example. Checkout the exmaple 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;
   }

If you give the thead a value of display: table-caption; it works.

Needs some additional CSS for positioning of th content.

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>

Well, a way to circumvent the problem is to not use separate cells, and to use <br /> instead.

I realize that this is not a very good fix.

Your code: http://jsbin.com/ozuhi5

Your code with fix: http://jsbin.com/ozuhi5/2

New <thead>:

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

It's a bug on google chrome read more about it on this Google page about issues on Chrome.

I do have the same problem when trying to styling the tbody element, This is the solution I use to fix my code without breaking other browsers support:

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 */
}

See the demo on this Fiddle