Div в таблице.

[sxxs]

Добрый день. Есть таблица (русунок1).

надо сделать вот так:

Что имеется ввиду:

Ячейка 1 это 2 объедененных строки в одну, позиционирование центр центр, 2 отдельная строка, позиционирование лево центр, 3 так же как 1.

Хочу сделать градиентную границу между двумя одинаковыми вертикальными блоками, как на рисунке 2.

Для этого создал стиль:

.s_gft {

padding:7px 0 0;

background: url(../images/gradient_for_table.png) repeat-x;}

}

При этом в таблице вставляю его после TD, например

<tr height="20">

<td height="20" style="text-align: center;"><div class="s5_gft"></div>1</td>

<td width="658px" colspan="2">

<div class="s5_gft"></div>

2</td>

<td style="text-align: center; width: 83px; background-color: #eaf0f7;"><div class="s5_gft"></div>3</td>

</tr>

Проблема в том, что стиль в ячейке выравнивается относительно текста, тоесть например к ячейке и 3 не применить стиль от ячейки 1, и например при уменьшении таблицы в ширину если меняется разрешение экрана, текст переносится на другие строчки, и стиль в ячейке номер 1 съезжает.

как жостко зафиксировать его относительно верхнего края?

[Justnewone]

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

[sxxs]

а какие еще варианты есть? в данном случае таблица 1) растянется по высоте 2) бэкграунд он не перекроет границы верхней и нижней ячеек

Edited April 19, 2010 by sxxs

[stars]

Вариантов 2:

<table>
<tr><td rowspan="2"></td><td colspan="2"></td><td rowspan="2"></td></tr>
<tr><td></td><td></td></tr>
<tr><td colspan="4">
<div></div>
</td></tr>
<tr><td rowspan="2"></td><td colspan="2"></td><td rowspan="2"></td></tr>
<tr><td></td><td></td></tr>
</table>

или

<table>
<tr><td rowspan="2"></td><td colspan="2"></td><td rowspan="2"></td></tr>
<tr><td></td><td></td></tr>
</table>
<div></div>
<table>
<tr><td rowspan="2"></td><td colspan="2"></td><td rowspan="2"></td></tr>
<tr><td></td><td></td></tr>
</table>

Если нужны еще варианты то сверстайте по другому...