Форум Сайтостроение Веб-строительство

re-hack: height=x% у table

Ellea
На сайте с 02.04.2007
Offline
21
Ellea
674

Подскажите, пожалуйста, хак (под все основные браузеры), помогающий достичь <table height=x% ...>. Проблема в том, что при указании DOCTYPE, height у таблиц не поддерживается по стандарту.

PS. Вариант перехода на блочную верстку, просьба не предлагать.

... записки на полях (http://mseo.livejournal.com) ...
M
На сайте с 27.07.2004
Offline
49
maxidesk
#1

попробуйте указать в стилях 


HTML, BODY {

 height: 100%;

}
Ellea
На сайте с 02.04.2007
Offline
21
Ellea
#2

maxidesk, пробовали. Не помогло.

M
На сайте с 27.07.2004
Offline
49
maxidesk
#3

пример DOCTYPE запостите

[Удален]
#4

http://xhtml.ru/2005/12/12/body_height_research/

M
На сайте с 27.07.2004
Offline
49
maxidesk
#5

в общем случае должно работать, да и в статье выше все разжевано 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

            "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

	<title>Title</title>

    <style>

    HTML, BODY {

        height: 100%;

        padding: 0px;

        margin: 0px;

    }

    </style>

</head>



<body>

<table width="100%" height="50%" border="1" cellspacing="2" cellpadding="2">

<tr><td><h1>1</h1></td></tr>

</table>



<table width="100%" border="1" cellspacing="2" cellpadding="2" style="height: 50%">

<tr><td><h1>2</h1></td></tr>

</table>



</body>

</html>
Ellea
На сайте с 02.04.2007
Offline
21
Ellea
#6

maxidesk, по боди-то да) Знаю такой способ. НО, забыла уточнить, таблица находится в таблице. И тогда такой способ не катит...

M
На сайте с 27.07.2004
Offline
49
maxidesk
#7

все работает если указывать явно высоту TD в который вложена таблица 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

            "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

	<title>Title</title>

    <style>

    HTML, BODY {

        height: 100%;

        padding: 0px;

        margin: 0px;

    }

    </style>

</head>



<body>

<table width="100%" height="50%" border="1" cellspacing="2" cellpadding="2">

<tr><td style="height: 100%">



<table width="100%" border="1" cellspacing="2" cellpadding="2" style="height: 50%">

<tr><td>табл 2. <h1>50% от TD таблицы 1 минус отступы (padding)</h1></td></tr>

</table>

табл.1

</td></tr>

</table>



</body>

</html>
S
На сайте с 25.12.2003
Offline
173
Saney
#8

При большой вложенности таблиц (чтобы работало во всех браузерах) нужно добавлять "height:100%" для BODY, HTML, для внешней таблицы в <table> и в каждой последующей ячейке <td> которая тянет высоту, и в которой может быть еще резиновая таблица. Разные браузеры по-разному считают процент ячеек, паддинги и бордеры. Чтобы растягивать внутренние таблицы по высоте, лучше тянуть отностительно 100% всей страницы, при этом все вышестоящие ячейки и таблицы должны быть тоже растянуты.

В примере, что ниже, решающим есть style="height:100%;" во внешнем теге <table>, без этого внутренняя ячейка не будет тянуться. 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd">

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

   <style>

    HTML, BODY {

        height: 100%;

    }

    </style>

</head>

<body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">

<table width="780" border="0" cellpadding="0" cellspacing="0" align="center" style="height:100%;">

  <tr>

    <td height="109" colspan="3" valign="top" bgcolor="#CCCCCC">header</td>

  </tr>

  <tr>

    <td width="20%" style="height:100%;" valign="top" bgcolor="#00CCFF">left</td>

    <td width="60%" valign="top">body</td>

    <td width="20%" valign="top" bgcolor="#00CCFF">right</td>

  </tr>

  <tr>

    <td height="62" colspan="3" valign="top" bgcolor="#CCCCCC">footer</td>

  </tr>

</table>



</body>

</html>
Красивые сниппеты Google ( https://saney.com/tools/google-snippets-generator.html )
gl_SPICE
На сайте с 28.08.2006
Offline
53
gl_SPICE
#9

Укажите правильный DOCTYPE, где этот атрибут отрабатывается, либо не указывайте тип вовсе, если это возможно, конечно.

Товаровед.инфо — помощь в выборе качественных товаров и услуг (http://www.tovaroved.info/)

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий