Возможно ли иметь градиент фона, который охватывает всю строку таблицы? Я могу применить фон только к отдельным ячейкам таблицы, даже если я специально пытаюсь это предотвратить. Вот развернутый образец, который нацелен на Webkit на jsfiddle:
Как вы можете видеть, я использую 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; }
