CSS: Градиенты, повторяющиеся в Chrome, когда установлены на tbody/thead

Проблема, с которой я столкнулась, показана здесь. В основном, когда я помещаю градиент в thead, Chrome повторяет этот градиент для ячейки... Фактический желаемый результат - то, что создал firefox - сплошной градиент для всего thead.

enter image description here

Любые идеи о том, как исправить это?

Вот 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>

Ответы

Ответ 1

Это неудачная проблема, но есть простой подход, который будет работать для большинства макетов:

Задайте градиент на самой таблице и дайте <td> сплошной цвет.

скрипт: http://jsfiddle.net/vudj9/

Ответ 2

Установите background-attachment:fixed; на thead, и он будет работать нормально

Ответ 3

Я считаю, что, поскольку стиль background не может быть применен к элементу thead.

Ответ 4

Применение градиента к элементу th вместо thead и использование селектора атрибутов rowspan, похоже, сработает. Это не будет работать так хорошо, если высота двух строк заголовка будет гибкой, так как вам нужно знать цвет среднего диапазона #7E7E7E в примере. Оформить заказ 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;
   }

Ответ 5

Если вы дадите thead значение display: table-caption;, оно будет работать.

Требуется некоторый дополнительный CSS для размещения содержимого th.

http://jsfiddle.net/4vnpC/

Ответ 6

Ну, способ обойти проблему состоит в том, чтобы не использовать отдельные ячейки и вместо этого использовать <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>

Ответ 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 */
}

См. демонстрацию на этом Fiddle