Борюсь с таблицами

DasTPID · August 24, 2009

Всем привет!

Имеется таблица с двумя колонками. В каждой из колонок имеется вложенная таблица, которая по ширине растянута на 100%. Но количество текста может быть абсолютно произвольным и слева и справа, поэтому у меня вложенные таблицы получаются неодинаковые по высоте, а так некрасиво. Пробовал написать в каждой из вложенных таблиц width = "100%" height = "100%" - почему-то никакого эффекта это не произвело. А что еще там написать можно - я не знаю. Помогите пожалуйста чайнику

3ABAPKA · August 24, 2009

Можно вот так сделать http://cssing.org.ua/2004/09/10/flex-faux/

DasTPID · August 24, 2009

Можно вот так сделать http://cssing.org.ua/2004/09/10/flex-faux/

Подождите, в статье говорится про дивы, а у меня как раз таблицы. Первый метод с repeat-y точно не подходит, потому что вложенная таблица заканчивается и соответственно фоном заливать нечего. А второй метод не подходит потому, что я точно не знаю высоту страницы в пикселах и поэтому не смогу отрисовать нужные рисунки. Да и с прозрачностью не особо хочется иметь дело...

Great Rash · August 24, 2009

А может назначать фон и т.п. не вложенным таблицам а ячейкам в которые эти таблицы вложены?

DasTPID · August 24, 2009

А может назначать фон и т.п. не вложенным таблицам а ячейкам в которые эти таблицы вложены?

У меня уже так свёрстано, что нельзя.

psywalker · August 24, 2009

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

Great Rash · August 24, 2009

Значит переделать. Иногда это проще чем измываться.

psywalker · August 24, 2009

Значит переделать. Иногда это проще чем измываться.

+1

DasTPID · August 25, 2009

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

А разве вёрстка в таблицах не подразумевает одну в другую, а другую в третью? Ну как у ребят из Виллабарджо? )

Переделывать не хочется, что вполне объяснимо Тем более, что по-другому я и не умею.

Что хочу:

Есть красная таблица (невидимая), которая разбита на две колонки. И в каждой такой ячейке есть вложенная таблица, которые А и B. Высота красной таблицы определяется максимумом из А и В, пусть как на картинке А будет выше чем В. Тогда А заполнит ячейку красной таблицы всю целиком, а В будет по высоте меньше, потому что текста меньше. Даже если я пропишу у таблицы В height = "100%" ничего не изменится. При этом width = "100%" как ни странно работает. А мне для эстетических целей надо, чтобы А и В были одинаковой высоты. Вопрос: как это сделать?

Пример того, что ваяю (82 килобайта): http://slil.ru/27926299

psywalker · August 25, 2009

Вот с этого надо было и начинать, лови, сделаешь под себя:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
		div.wrap { overflow: hidden; border: 1px solid; /*zoom:1; - для ИЕ6 незабудь прописать это свойство, только в отдельных стилях для ИЕ6, потому что оно не валидное*/ }

			div.wrap div.l,
			div.wrap div.r { 
				margin-bottom: -32000px; 
				padding-bottom: 32000px;
				background: red;
				float: left;
				width: 49%;
			}
				div.wrap div.r { background: blue; float: right;}


</style>
</head>

<body>
	<div class="wrap">
		<div class="l">
		<p>Есть красная таблица (невидимая), которая разбита на две колонки. И в каждой такой ячейке есть вложенная таблица, которые А и B. Высота красной таблицы определяется максимумом из А и В, пусть как на картинке А будет выше чем В. Тогда А заполнит ячейку красной таблицы всю целиком, а В будет по высоте меньше, потому что текста меньше. Даже если я пропишу у таблицы В height = "100%" ничего не изменится. При этом width = "100%" как ни странно работает. А мне для эстетических целей надо, чтобы А и В были одинаковой высоты. Вопрос: как это сделать?</p>
		</div>
		<div class="r"></div>
	</div>
</body>
</html>

DasTPID · August 25, 2009

Вот с этого надо было и начинать, лови, сделаешь под себя:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
		div.wrap { overflow: hidden; border: 1px solid; /*zoom:1; - для ИЕ6 незабудь прописать это свойство, только в отдельных стилях для ИЕ6, потому что оно не валидное*/ }

			div.wrap div.l,
			div.wrap div.r { 
				margin-bottom: -32000px; 
				padding-bottom: 32000px;
				background: red;
				float: left;
				width: 49%;
			}
				div.wrap div.r { background: blue; float: right;}


</style>
</head>

<body>
	<div class="wrap">
		<div class="l">
		<p>Есть красная таблица (невидимая), которая разбита на две колонки. И в каждой такой ячейке есть вложенная таблица, которые А и B. Высота красной таблицы определяется максимумом из А и В, пусть как на картинке А будет выше чем В. Тогда А заполнит ячейку красной таблицы всю целиком, а В будет по высоте меньше, потому что текста меньше. Даже если я пропишу у таблицы В height = "100%" ничего не изменится. При этом width = "100%" как ни странно работает. А мне для эстетических целей надо, чтобы А и В были одинаковой высоты. Вопрос: как это сделать?</p>
		</div>
		<div class="r"></div>
	</div>
</body>
</html>

Спасибо! Показывает примерно как я и хотел. Только не могли бы вы написать то же самое с использованием <table> и без <div> или вкратце объяснить что тут вообще происходит? Потому что что такое див я не знаю, ибо чайник...

psywalker · August 25, 2009

Спасибо! Показывает примерно как я и хотел. Только не могли бы вы написать то же самое с использованием <table> и без <div> или вкратце объяснить что тут вообще происходит? Потому что что такое див я не знаю, ибо чайник...

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
		table { width: 100%;}
			td { width: 50%; vertical-align: top; border: 1px solid #000;}


</style>
</head>

<body>
	<table>
		<tr>
			<td>
					<p>Есть красная таблица (невидимая), которая разбита на две колонки. И в каждой такой ячейке есть вложенная таблица, которые А и B. Высота красной таблицы определяется максимумом из А и В, пусть как на картинке А будет выше чем В. Тогда А заполнит ячейку красной таблицы всю целиком, а В будет по высоте меньше, потому что текста меньше. Даже если я пропишу у таблицы В height = "100%" ничего не изменится. При этом width = "100%" как ни странно работает. А мне для эстетических целей надо, чтобы А и В были одинаковой высоты. Вопрос: как это сделать?</p>
			</td>
			<td>
					<p>Есть красная таблица</p>
			</td>
		</tr>
	</table>
</body>
</html>

Игорь Ермаков · August 26, 2009

1. Советую тебе снести к чёртовой матери всё, что ты сделал таблицами и начать делать это блоками.

2. Если такой вариант невозможен, то вот вам мой вариант.

<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Language" content="ru" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Колонки одинаковой высоты с помощью table</title>
<style>

#contaner{height:100%; width:500px;
margin:0 auto;}

#one{background:#ccc; color:#fff;
height:100%; width:250px;}

#two{background:#666; color:#fff;
height:100%; width:250px;}

</style>
</head>
<body>

<table id="contaner" cellspacing="0px" cellpadding="10px">
<tr>
<td id="one">
<table>
<tr>
<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.

Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.

Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.

</td>
</tr>
</table>
</td>
<td  valign="top" id="two">
<table>
<tr>
<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</td>
</tr>
</table>
</td>
</tr>
</table>

</body>
</html>

Sign In

Борюсь с таблицами

Question

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information