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

user_90922 0
Viewed 6048

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.

enter image description here

Any ideas on how to fix this?

Here is the css I have:

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 );
}

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>
gradient google-chrome css html
7 Answers

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>

user_4769510
Related