Применение одного градиента фона к строке таблицы

Возможно ли иметь градиент фона, который охватывает всю строку таблицы? Я могу применить фон только к отдельным ячейкам таблицы, даже если я специально пытаюсь это предотвратить. Вот развернутый образец, который нацелен на Webkit на jsfiddle:

http://jsfiddle.net/cGV47/2/

Как вы можете видеть, я использую border-collapse:collapse, и я указываю background:transparent для дочерних элементов <tr> и <th>, но красный градиент слева повторяется для каждой ячейки таблицы. Я также попытался применить фон к <tr>, но с тем же результатом, что и сейчас.

Чтобы просмотреть код, не перейдя в jsfiddle, вот он:

HTML

<table>
    <thead>
        <tr>
            <th>One</th>
            <th>Two</th>
            <th>Three</th>
            <th>Four</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>un</td>
            <td>deux</td>
            <td>trois</td>
            <td>quatre</td>
        </tr>
    </tbody>
</table>

CSS

* {margin:0;padding:0;border:0;border-collapse:collapse;}
table { width:100%; }
thead { background: -webkit-linear-gradient(left, rgba(222,22,22,1) 0%, rgba(222,222,222,0) 20%, rgba(222,222,222,0) 80%, rgba(222,222,222,1) 100%); }
thead tr, thead th { background:transparent; }

Ответы

Ответ 1

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

http://jsfiddle.net/cGV47/64/

Ответ 2

Я думаю, что есть лучшее решение для них:

  • Примените фон градиента ко всей таблице.
  • Затем примените твердый фон для thead и tfooter.

table { border:0; border-collapse:collapse;
    background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(108,211,229,0.2) 40%, rgba(108,211,229,0.2) 60%, rgba(255,255,255,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(40%,rgba(108,211,229,0.2)), color-stop(60%,rgba(108,211,229,0.2)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(108,211,229,0.2) 40%,rgba(108,211,229,0.2) 60%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(108,211,229,0.2) 40%,rgba(108,211,229,0.2) 60%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(108,211,229,0.2) 40%,rgba(108,211,229,0.2) 60%,rgba(255,255,255,1) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(108,211,229,0.2) 40%,rgba(108,211,229,0.2) 60%,rgba(255,255,255,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */            
}

table thead, tfoot {
    background: #fff;
}

код >

Посмотрите: http://jsfiddle.net/5brPL/

Ответ 3

Не самое приятное решение, но оно делает трюк. Вы просто настроили каждый th на 25% цветового диапазона. В приведенном ниже примере используется диапазон цветов от 0 до 255.

http://jsfiddle.net/cGV47/3/

Тот же HTML, что и у вас. Здесь CSS:

table { width:100%; }

th {
    background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%, 
                                              rgba(191,191,191,1) 100%);
}
th + th {
    background: -webkit-linear-gradient(left, rgba(191,191,191,1) 0%, 
                                              rgba(128,128,128,1) 100%);
}
th + th + th {
    background: -webkit-linear-gradient(left, rgba(128,128,128,1) 0%, 
                                              rgba(64,64,64,1) 100%);
}
th + th + th + th {
    background: -webkit-linear-gradient(left, rgba(64,64,64,1) 0%, 
                                              rgba(0,0,0,1) 100%);
}

Я нашел эту проблему в Google: http://code.google.com/p/chromium/issues/detail?id=122988, но решения нет.

В Firefox нет этой проблемы (не проверял другие браузеры):
http://jsfiddle.net/cGV47/4/

Ответ 4

Я обнаружил, что тестирую новый repeating-linear-gradient, который, по-видимому, работает для элементов <tr> (я только тестировал их в Google Chrome).

Трюк состоит в том, чтобы предоставить самый широкий повторяющийся шаблон, чтобы... он не повторялся.

Попробуйте следующее:

tr {
    background: repeating-linear-gradient(
        45deg,
        red 0%,
        blue 100%
    );
}

http://jsfiddle.net/slyy/2pzwws0d/