Фоновое изображение для TR в таблице

Недавно я писал о стилизации колонок таблицы. Теперь поговорим немного на тему стилизации рядов, а конкретно о фоновых изображениях в них. Для того, чтобы чётко представлять проблему, которая у вас возникнет, рекомендую использовать фоновое изображение с горизонтальным градиентом.

1
2
3
4
5
6
7
8

<table style="width:100%">
   <tr style="height:50px; background: url(bg.png) 0 0; ">
      <td>один</td>
      <td>два</td>
      <td>три</td>
      <td>четыре</td>
   </tr>
</table>

Как и ожидалось Internet Expolrer прорисовывает таблицу некорректно, присваивая фоновый рисунок не только рядам, но и ячейкам. Исправляется это на удивление легко. Для начала укажем, что для ячеек не нужен фоновый рисунок. Смотрим в браузер и… теперь фон вовсе пропал. Но мы не сдаёмся и после непродолжительных «танцев с бубном» выясняем, что для рядов таблицы необходимо указать относительное позиционирование . О чудо, теперь даже самый “корявый” браузер показывает таблицу так, как мы этого хотим.

1
2
3
4
5
6
7
8

<table style="width:100%">
   <tr style="height:50px; background: url(bg.png) 0 0; position:relative ">
      <td style="background:none;">один</td>
      <td style="background:none;">два</td>
      <td style="background:none;">три</td>
      <td style="background:none;">четыре</td>
   </tr>
</table>

Однако беда приходит откуда её совсем не ждёшь. Посмотрим на таблицу в Google Chrome или в Safari, что по-сути одно и то же. Ага, тот же «баг», что в IE, с той лишь разницей, что исправить его невозможно. Во всяком случае мне это сделать не удалось и пока совет могу дать только один: не использовать фоновый рисунок для рядов.