Div внутри table

Kenshi45 · March 2, 2009

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

http://aionzone.ru/themes/aionzone/test.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test Page</title>
<style type="text/css">
body{
	margin: 0;
	padding: 10px;
}
div.shape{
	padding: 10px;
	border: 1px dotted blue;
	width: 100%;
	height: 100%;
}
table{
	border: 1px solid red;
	margin: 0;
	padding: 10px;
}
</style>
</head>
<body>

<table cellspacing="0" cellpadding="0">
	<tr><td><div class="shape"><div class="shape"> </div></div></td></tr>
</table>

</body>
</html>

Edited March 2, 2009 by Kenshi45

Searcher · March 2, 2009

1. блочный элемент во встроенном - уже нелогично.

2. по стандартам к указанной ширине добавляются отступы и рамки.

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

Вобщем, уберите width:100%. А вот с высотой надо думать, вариантов много, все зависит от цели.

Kenshi45 · March 2, 2009

1. блочный элемент во встроенном - уже нелогично.
2. по стандартам к указанной ширине добавляются отступы и рамки.
3. по стандартам, если у блочного элемента ширина не указана и он не плавающий и не абсолютно позиционированный, то он растягивается на всю доступную ширину уже вместе с отступами и бордерами.
Вобщем, уберите width:100%. А вот с высотой надо думать, вариантов много, все зависит от цели.

Как быть, если необходимо использовать div внутри ячеек таблиц?

Edited March 2, 2009 by Kenshi45

s0rr0w · March 2, 2009

Есть таблица, внутри которой находятся два div'a, один внутри другого, не понятно как так получается, но если поставить отступы, то все съезжает вправо...
http://aionzone.ru/themes/aionzone/test.htm

Так и должно быть.

Теперь пояснение, почему так и должно быть.

Сначала разберем первую конструкцию.

Таблица имеет padding. Для separated модели это будет значить, что между бордюром таблицы и строками ячейки будет отступ в 10px.

Ширина бокса таблицы = ширина пробела [8px] + 2*10пкс + 2*1пкс.

А вот ширина таблицы будет равна ширина пробела + 2*10пкс падингов.

Берем дальше, первый бокс. Ширина первого бокса должна составлять 100% от ширины таблицы, т.е. 20 + 8 = 28пкс, а туда еще нужно добавить два паддинга по 10 пкс и два бордюра по 1пкс, чтобы получить всю ширину контента. Так как 28 > 8, то браузер должен запустить механизм проглатывания правого padding'а.

Реальный размер контента с первым боксом будет 28 + 10 = 38пкс.

Но есть еще второй блок. Его ширина, 100% от 38пкс, будет равна 38пкс. И снова добавляем паддинги и бордюр. Паддинг справа проглатывается, а левый будет добавлен к ширине таблицы.

Итого, ширина таблицы будет 48пкс + 2*10пкс + 2*1 пкс

Kenshi45 · March 2, 2009

Вообще правильно использовать div внутри таблиц или надо как-то по-другому делать?

s0rr0w · March 2, 2009

Вообще правильно использовать div внутри таблиц или надо как-то по-другому делать?

Пофиг. Что не запрещено спецификацией - то возможно.

Sign In

Div внутри table

Question

Kenshi45

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Searcher

Link to comment

Share on other sites

Kenshi45

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

Kenshi45

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information