Таблица в таблице

rubius2008 · August 5, 2010

Никак не получается сделать одну таблицу внутри другой по следующему принципу.

Необходимо чтобы главная таблица состояла из 3 строк, 2 строчки фиксированной величины, третья (центральная) автоматически вычисляется, в этой же строчке необходимо вставить еще одну таблицу состоящую из 2 столбцов один фиксированной величины, второй - авторастягивается на оставшуюся часть срединной ячейки. По ширине все хорошо умещается на всю ячейку а вот по высоте в опере и IE8 не растягивается , подскажите что добавить или исправить? Вот то что я написал:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta http-equiv="content-language" content="ru" />

<style>
html,body{
	height:100%;
	margin: 0;
	padding: 0;
}
table {
  border: 0 none;
  border-collapse: collapse;
}
td, th {
	padding:0;
	margin:0;
	  border: 0 none;
}
.mainTable{
  width: 100%;
  height: 100%;
}
.maintop {
	background-color: #90C;
	height:200px;
}
.maincenter {
	background-color:#FFF;
	height: expression(document.documentElement.clientHeight - 200 - 100 + 'px');
}
.mainbottom {
	background-color:#9F3;
	height:100px;	
}
.inner {
  width: 100%;
  height: 100%;
}
.innerleft {
	width:150px;
	height: expression(document.documentElement.clientHeight - 200 - 100 + 'px');
	  background-color:#0FF;  
}
.innerright{
	height: expression(document.documentElement.clientHeight - 200 - 100 + 'px');
	background-color:#FC3;
}
</style>
</head>



<body>
<table class="mainTable">
  <tr>
	<td class="maintop">верх</td>
  </tr>
  <tr>
	<td class="maincenter">
		<table class="inner">
		  <tr>
			<td class="innerleft">левый центр</td>
			<td class="innerright">правый центр</td>
		  </tr>
		</table>

	</td>
  </tr>
  <tr>
	<td class="mainbottom">низ</td>
  </tr>
</table>
</body>
</html>

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

Great Rash · August 6, 2010

Верстайте на слоях, все проблемы сразу исчезнут.

Expression работает только в ИЕ7 и ниже.

rubius2008 · August 6, 2010

Верстайте на слоях, все проблемы сразу исчезнут.
Expression работает только в ИЕ7 и ниже.

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

Допустим один 400px второй 300рх. По высоте, чтоб на все окно были. И корректно все это отображалось в IE7 и остальных современных браузерах.

Edited August 6, 2010 by rubius2008

Great Rash · August 6, 2010

«css двухколоночный макет» в Google.

Sign In

Таблица в таблице

Question

rubius2008

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

rubius2008

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information