Границы таблицы. Нестыковка.

[UNIX]

Hi All! Разъясните пожалуйста один момент. Имеется таблица, шапка этой таблицы не имеет границ, а вот само тело обрамлено границей толщиной 2 пикселя. На стыке шапки и тела, возникает неприятный эффект (см. рисунок).

Как от этого можно избавиться? По сути нужно как-то "втолкнуть" границу внутрь ячейки, а не наружу. Сдается мне, CSS такого не умеет. Фокус с добавлением ячеек по краям прошу не предлагать, хотелось бы без этого.

[Mordraug]

код разметки в студию

[s0rr0w]

Hi All! Разъясните пожалуйста один момент. Имеется таблица, шапка этой таблицы не имеет границ, а вот само тело обрамлено границей толщиной 2 пикселя. На стыке шапки и тела, возникает неприятный эффект (см. рисунок).

Как от этого можно избавиться? По сути нужно как-то "втолкнуть" границу внутрь ячейки, а не наружу. Сдается мне, CSS такого не умеет. Фокус с добавлением ячеек по краям прошу не предлагать, хотелось бы без этого.

http://forum.htmlbook.ru/index.php?showtopic=12667

Читать вдумчиво.

[NuShiKo]

Как от этого можно избавиться?

Для шапки таблицы сделать бордер такого же цвета как фон шапки и такой же толщины как у тела таблицы?

[s0rr0w]

Для шапки таблицы сделать бордер такого же цвета как фон шапки и такой же толщины как у тела таблицы?

Оберните табличку дивом, которому задайте бордюр.

[UNIX]

http://forum.htmlbook.ru/index.php?showtopic=12667

Читать вдумчиво.

Так что же, просто забить?

Для шапки таблицы сделать бордер такого же цвета как фон шапки и такой же толщины как у тела таблицы?

Шапка таблицы залита градиентом. Если добавить бордер, эффект не менее чудовищный получается.

Оберните табличку дивом, которому задайте бордюр.

Это, извините, для чего (правда не понимаю)?

[Mordraug]

Так что же, просто забить?

Шапка таблицы залита градиентом. Если добавить бордер, эффект не менее чудовищный получается.

Это, извините, для чего (правда не понимаю)?

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

[UNIX]

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

Код кривой, показывать не хотелось)) Поясню: шапка не имеет границ, каждая строка таблицы состоит из трех ячеек (левая, средняя, правая) + самая нижняя строка - это одна ячейка.

CSS

.table_head {						// Шапка таблицы
	text-align: center;
	background: #000000 url(images/head.gif) repeat-x;
	height:		19px;
}
#cell_l {						//  Левая ячейка
	border-left: 2px solid #757575;
	border-bottom: 1px solid #eeeeee;
	vertical-align: baseline;
	padding-left: 10px;
	width: 70%;
}
#cell_c {						//  Средняя ячейка
	border-bottom: 1px solid #eeeeee;
	border-right: 1px solid #eeeeee;
	border-left: 1px solid #eeeeee;
	vertical-align: baseline;
	text-align: center;
	width: 15%;
}
#cell_r {						//  Правая ячейка
	border-right: 2px solid #757575;
	border-bottom: 1px solid #eeeeee;
	vertical-align: baseline;
	text-align: center;
	width: 15%;
}
#cell_bottom {			  //  Это низ (тут все 3 ячейки совмещены)
	font-size: 12px;
	vertical-align: bottom;
	text-align: right;
	border-right: 2px solid #757575;
	border-bottom: 2px solid #757575;
	border-left: 2px solid #757575;
}

HTML

<table align="center" width="75%">
		<tr>
		  <th class="table_head" colspan="3">Шапка таблички</th>
		</tr>
		<tr>
		  <td id="cell_l">Левый столбец</td>
		  <td id="cell_c">Центральный столбец</td>
		  <td id="cell_r">Правый столбец</td>
		</tr>
		<tr>
		  <td colspan="3" id="cell_bottom">А вот это самый низ</td>
		</tr>
</table>

Вот как-то так. Кстати забыл сказать: в ИЕ 6 этот код работает, как надо.

Edited February 23, 2009 by UNIX

[NuShiKo]

Посмотрела в 3-х браузерах, все везде одинаково и так как надо (ie7 ff3 opera9). Если надо таки решить проблему для других браузеров (уточните каких?), сделайте див вместо шапки таблицы, а остальное уже табличкой.