Выравнивание ячеек в соседних таблицах

Ich · December 29, 2009

Здравствуйте!

Долгое время обходился инфой, размещенной на сайте http://www.htmlbook.ru (за что авторам ОГРОМНОЕ спасибо), но вот пришло время, когда необходимо спросить у асов :unsure:

Есть три таблички:

Задумка состоит в том, чтобы обведенная часть (это по сути ячейка) выравнивалась по нижней границе области. Проблема в том, что каждая из таблиц генерируется отдельно, и задать однозначно высоту ее нельзя, но при этом ячейки в двух таблицах необходимо выравнять. Салатовым выделены соответственно границы таблиц.

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

Edited December 29, 2009 by Ich

psywalker · December 29, 2009

1) Я так понял, что слева и справа - это две разные таблицы?

2) Если я правильно понял, ты хочешь, чтобы левая и правая таблица выравнивались по высоте самой длинной таблицы?

3) Выложи весь код.

Great Rash · December 29, 2009

Используем стиль письма, заданный psywalker'ом...

1) Почему нельзя сделать это все одной таблицей?

2) Почему нельзя вставить таблицу в ячейку?

3) Почему нельзя использовать верстку блоками?

4) Почему нельзя использовать яваскрипт для выравнивания высот?

Ответьте на эти вопросы и возможно вы получите решение вашей проблемы. Ну или нам будет легче вам помочь.

Ich · December 29, 2009

1) Я так понял, что слева и справа - это две разные таблицы?
2) Если я правильно понял, ты хочешь, чтобы левая и правая таблица выравнивались по высоте самой длинной таблицы?
3) Выложи весь код.

1) Именно так

2) Так и есть

3)

<td valign="top" width="521">
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
	<td valign="top" class="content" ><div id="bg_catalog_1">Каталог / наборы</div>
<div id="bglist"></div>
<div id=allspec><a href="/" class="link">Главная</a> <img src="arr2.gif" alt="" width="16" height="16" border="0" align="absmiddle"><A href="./CID_00.html" class="link" title="Каталог">Каталог</A> <img src="arr2.gif" alt="" width="16" height="16" border="0" align="absmiddle">   наборы</div>
<div style="margin:0px 11px; "> 

<table width="100%" cellpadding="0" cellspacing="0">
<tr>
 <td>
   <table cellpadding="0" cellspacing="0" border="0" width="100%">

   <!-- main_product_forma -->
  <tr><TD class=setka colspan=3 height=1><IMG height=1 src="spacer.gif" width=1></TD></tr><tr><td valign="top" class="panel_l">	<TABLE  border="0" cellpadding="0" cellspacing="10" width="259" height="100%" bgcolor="cee438">
		<TR>
			<TD>
				<DIV>
		<A href="/shop/UID_194.html" class="product_name"  title="test"><strong>test</strong></A>
				</DIV>
			</TD>
		</TR>
		<TR>
			<TD style="TEXT-ALIGN: justify; color:#ff6600; padding:10px 0px 0px" class="text_1">
			<A href="/shop/UID_194.html" class="product_name"  title="test"><img src="no_photo.gif" alt="test купить" title="test" lowsrc="no_photo.gif"  onerror="NoFoto(this,'/')" onload="EditFoto(this,90)"  border="0" align="left" hspace="5"></A>
			много текстамного текстамного текстамного текстамного текстамного текстамного текстамного текстамного текстамного текстамного текстамного текстамного текстамного текстамного текстамного текстамного текстамного текстамного текстамного текстамного текстамного текстамного текстамного текстамного текстамного текстамного текстамного текстамного текстамного текстамного текстамного текстамного текстамного текстамного текстамного текстамного текста
			</TD>
		</TR>

<TR> 
			<TD align="right" valign="bootom"><table style="margin:10px 0px 0px" width="100%" height="100%" border="0" cellspacing="2" cellpadding="0">
  <tr>
	<td rowspan="2">
		<b class=price >20 000 руб</b><br>
		<font class=black>Временно нет в наличии</font>
		<div style="color:#ff6600;"></div>
		</td>


  <tr>
	<td>

  </tr>


</table></TD>
  </TR>

	</TABLE>
</td><TD width=1 class=setka><IMG height=1 src="spacer.gif" width=1></TD><td valign="top" class="panel_r">	<TABLE  border="0" cellpadding="0" cellspacing="10" width="259" height="100%" bgcolor="cee438">
		<TR>
			<TD>
				<DIV>
		<A href="/shop/UID_219.html" class="product_name"  title="test2"><strong>test2</strong></A>
				</DIV>
			</TD>
		</TR>
		<TR>
			<TD style="TEXT-ALIGN: justify; color:#ff6600; padding:10px 0px 0px" class="text_1">
			<A href="/shop/UID_219.html" class="product_name"  title="test2"><img src="no_photo.gif" alt="test2 купить" title="test2" lowsrc="no_photo.gif"  onerror="NoFoto(this,'/')" onload="EditFoto(this,90)"  border="0" align="left" hspace="5"></A>
			test
			</TD>
		</TR>

<TR> 
			<TD align="right" valign="bootom"><table style="margin:10px 0px 0px" width="100%" height="100%" border="0" cellspacing="2" cellpadding="0">
  <tr>
	<td rowspan="2">
		<b class=price >20 000 руб</b><br>
		<font class=black>Временно нет в наличии</font>
		<div style="color:#ff6600;"></div>
		</td>


  <tr>
	<td>

  </tr>


</table></TD>
  </TR>

	</TABLE>
</td><tr><TD class=setka colspan=3 height=1><IMG height=1 src="spacer.gif" width=1></TD></tr><tr><td valign="top" class="panel_l">	<TABLE  border="0" cellpadding="0" cellspacing="10" width="259" height="100%" bgcolor="cee438">
		<TR>
			<TD>
				<DIV>
		<A href="/shop/UID_220.html" class="product_name"  title="test3"><strong>test3</strong></A>
				</DIV>
			</TD>
		</TR>
		<TR>
			<TD style="TEXT-ALIGN: justify; color:#ff6600; padding:10px 0px 0px" class="text_1">
			<A href="/shop/UID_220.html" class="product_name"  title="test3"><img src="no_photo.gif" alt="test3 купить" title="test3" lowsrc="no_photo.gif"  onerror="NoFoto(this,'/')" onload="EditFoto(this,90)"  border="0" align="left" hspace="5"></A>
			test



			</TD>
		</TR>

<TR> 
			<TD align="right" valign="bootom"><table style="margin:10px 0px 0px" width="100%" height="100%" border="0" cellspacing="2" cellpadding="0">
  <tr>
	<td rowspan="2">
		<b class=price >20 000 руб</b><br>
		<font class=black>Временно нет в наличии</font>
		<div style="color:#ff6600;"></div>
		</td>

</table></TD>
  </TR>

	</TABLE>
</td><TD width=1 class=setka><IMG height=1 src="spacer.gif" width=1></TD>
 <!-- main_product_forma-->
   </table>
 </td>
</tr>
<tr>
<td width="100%" style=padding-left:10 class=style8 colspan="2">
	<div style="padding-top:15;padding-bottom:15" class=black>

	</div>
	</td>
</tr>
</table>


</div>
</td>
  </tr>
</table>

</td>

Код для:

psywalker · December 29, 2009

Хрень!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<title>page2</title>
<style type="text/css">
	*{ margin: 0; padding:0;}
	html,body { height: 100%; }

	table.wrap { height: 100%;}
		table.wrap td,
		table.wrap table { height: 100%; vertical-align: text-top;}

		table.wrap table td { background: #0F9;}
</style>
</head>
<body>

	<table class="wrap">
		<tr>
			<td>

				<!-- Left Table-->
				<table>
					<tr>
						<td>
							<p>Amonlase dusce hertserro lorem umal esuada odirtase Morbi nunc odioavida atcursus nec, luctus alor.</p>
						</td>
					</tr>
				</table>


			</td>
			<td>

				<!-- Right Table-->
				<table>
					<tr>
						<td>
							<p>Amonlase dusce hertserro lorem umal esuada odirtase Morbi nunc odioavida atcursus nec, luctus alor.</p>
						</td>
					</tr>
				</table>

			</td>
		</tr>
	</table>

</body>
</html>

Ich · December 29, 2009

Вставил в стиль это:

table.wrap { height: 100%;}
		table.wrap td,
		table.wrap table { height: 100%; vertical-align: text-top;}

		table.wrap table td { background: #00F;}

Получил следующее:

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

Попробовал задать для первой ячейки height: 100%, не удалось.

Про код:

*{ margin: 0; padding:0;}
	html,body { height: 100%; }

Не могли бы пояснить про это, что это обеспечивает?

Ich · January 3, 2010

Всех с Новым Годом!

Вопрос всё еще актуален, подскажите, пожалуйста, будьте добры.

Ich · January 19, 2010

to psywalker:

Сделал всё, как Вы рекомендовали, и в стили всё добавил.

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

psywalker · January 20, 2010

to psywalker:
Сделал всё, как Вы рекомендовали, и в стили всё добавил.
Но вот добиться того, чтобы наполнение таблицы происходило за счет увеличения высоты средней ячейки не могу. Подскажите, пожалуйста.

Попробуй задай в % хедер и футер в таблице, допустим по 10%, а среднюю 80% сделай

Sign In

Выравнивание ячеек в соседних таблицах

Question

Ich

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Ich

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Ich

Link to comment

Share on other sites

Ich

Link to comment

Share on other sites

Ich

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information