Высота таблицы

TAILER · April 8, 2010

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

Опишу:

Черная таблица растягивается по высоте в зависимости от контента.

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

И наоборот. В зависимости от растягивания синей таблицы, растягивалась и зеленая таблица.

Красная и оранжевая таблица имеют фиксированную высоту в пикселях.

psywalker · April 8, 2010

а задать всем нужным элементам высоту 100% слабо?

TAILER · April 8, 2010

а задать всем нужным элементам высоту 100% слабо?

Тогда скажи почему синяя таблица не растянулась?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Тест</title>
<style type="text/css">
table td {
   vertical-align: top;
}	
</style>
</head>
<body>

<table cellpadding=0 cellspacing=0 style="border: 4px solid #000000;">
<tr>
  <td>
  <table cellpadding=0 cellspacing=0 style="border: 4px solid #ff0000; height: 200px;">
	<tr>
	  <td>Вася</td>
	  <td>Петя</td>
	</tr>
  </table>
  <table cellpadding=0 cellspacing=0 style="border: 4px solid #fdc503; height: 300px;">
	<tr>
	  <td>Вася</td>
	  <td>Петя</td>
	</tr>
  </table>
  <table cellpadding=0 cellspacing=0 style="border: 4px solid #149e1b;">
	<tr>
	  <td>Вася<br><br><br>Вася<br><br><br></td>	  
	</tr>
	<tr>
	  <td height=15px>Gtndfgdfg</td>	  
	</tr>
  </table>
  </td>
  <td>
  <table cellpadding=0 cellspacing=0 style="border: 4px solid #0309fd; height: 100%;">
	<tr>
	  <td style="height: 100%;">Вася<br><br><br>Вася<br><br><br></td>	  
	</tr>
	<tr>
	  <td height=15px>00000000</td>	  
	</tr>
  </table>
  </td>
</tr>
</table>

</body>
</html>

psywalker · April 8, 2010

Потому-что в стилях ты забыл указать высоту для body,html{height: 100%;} и table{height: 100%;} и т.д. А вообще все атрибуты вынеси в стили для начала.

TAILER · April 8, 2010

Зеленая таблица растягивается по всему контенту (FF).

А в IE вообще не работает

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Тест</title>
<style type="text/css">
table td {
   vertical-align: top;
}
body, html {
   height: 100%;
}
table {
   height: 100%;
} 	
</style>
</head>
<body>

<table cellpadding=0 cellspacing=0 style="border: 4px solid #000000;">
<tr>
  <td>
  <table cellpadding=0 cellspacing=0 border=1 style="border: 4px solid #ff0000; height: 200px;">
	<tr>
	  <td>Вася</td>
	  <td>Петя</td>
	</tr>
  </table>
  <table cellpadding=0 cellspacing=0 border=1 style="border: 4px solid #fdc503; height: 300px;">
	<tr>
	  <td>Вася</td>
	  <td>Петя</td>
	</tr>
  </table>
  <table cellpadding=0 cellspacing=0 border=1 style="border: 4px solid #149e1b;">
	<tr>
	  <td>Вася<br><br><br>Вася<br><br><br></td>	  
	</tr>
	<tr>
	  <td height=15px>Gtndfgdfg</td>	  
	</tr>
  </table>
  </td>
  <td>
  <table cellpadding=0 cellspacing=0 border=1 style="border: 4px solid #0309fd;">
	<tr>
	  <td>Вася<br><br><br>Вася<br><br><br></td>	  
	</tr>
	<tr>
	  <td height=15px>00000000</td>	  
	</tr>
  </table>
  </td>
</tr>
</table>

</body>
</html>

Edited April 8, 2010 by TAILER

panig · April 8, 2010

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

То есть всего две таблицы, одна обертка и другая с ячейками.

Edited April 8, 2010 by panig

TAILER · April 8, 2010

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

А потом добавив ячейку по всему сайту rowspan для правой части менять?

Sign In

Высота таблицы

Question

TAILER

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

TAILER

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

TAILER

Link to comment

Share on other sites

panig

Link to comment

Share on other sites

TAILER

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information