Обзоры, статьи, исследования



Добавление фона к строке таблицы


Джонатан Снук (Jonathan Snook) ещё в 2005 году на своём сайте озвучил проблему с фоновым изображением для строки таблицы .

Суть проблемы в том, что при добавлении фона к строке таблицы — в FF всё корректно отображается, в IE и Opera — воспринимается для каждой ячейки отдельно.

Если нужно применить вертикальный градиент, или залить строку цветом - проблема не видна, однако стоит захотеть для строки поставить горизонтальный градиент или же, например, стрелочку в последней ячейке, как проблема становится неприятной.

Имеем код:

table{border-collapse:collapse;} td{border:1px solid #dddddd;padding:4px;} tr{background:url(arrow.gif) no-repeat right 50%;}

Результат в IE:
Результат в IE

Результат в Opera и Firefox (именно так и хочется):
Результат в Opera и Firefox

В случае со стрелкой или любой другой иконкой, можно создать класс для нужной ячейки и забыть об этом. Но что делать, если нужно применить, скажем, градиент?

Код:

tr.row1{
background:url(grad_h.gif) repeat-y;
}
tr{
background:url(grad_h2.gif) repeat-y;
}

Ожидаемый результат (в современных браузерах):
Ожидаемый результат (в современных браузерах)

Суровая правда IE6:
Суровая правда IE6

Решение задачи

Есть решение от Francesco Barresi - для каждой ячейки с помощью скрипта задать позицию фона

Статья, к сожалению, на испанском, что делает её менее доступным, но суть подхода понятна и так :)

function setTableRowBackgroundImagePosition(table){
var all_tablesRows;
if (table) all_tablesRows = table.getElementsByTagName("tr");
else all_tablesRows = document.getElementsByTagName("tr");

for (var i = 0; i < all_tablesRows.length; i++){
if(all_tablesRows[i].style.backgroundImage == '') continue;//No background-image here, go on.
var cells = all_tablesRows[i].cells;
var previousWidth = 0;
for (var j = 0; j < cells.length - 1 ; j++){//The last cell is processed after the for.
cells[j].style.backgroundPosition = '-' + previousWidth.toString() + "px 0px";
if(navigator.userAgent.indexOf("Opera")!=-1){//mmm...Opera
cells[j].style.backgroundImage = all_tablesRows[i].style.backgroundImage;
}
previousWidth += cells[j].clientWidth;
}
cells[cells.length-1].style.backgroundImage = all_tablesRows[i].style.backgroundImage;
cells[cells.length-1].style.backgroundPosition = "100% 0%";
}
}

В комментариях к этой же испанской статье, есть решение проблемы!

tr.row1 td
{
background-position: expression(-this.offsetLeft);
}

Краткое резюме

В любом случае, стоит дважды хорошо подумать - а действительно ли нужно применить фоновое изображение к ?

Учитывая отсутствие нормального решения, возможно стоит поискать обходные пути - к примеру, использование отдельного класса для последней ячейки намного лучше, чем использовать лишний скрипт либо expression.

Купить диплом в Сочи тут.