Как сделать, чтобы таблица растягивала body

Razor · July 2, 2010

<!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" xml:lang="ru" lang="ru" dir="ltr">
<head>
	<title>таблица</title>
<style>
html, body {
	width: 100%;
	margin: 0;
	padding: 0;
}
body {
	border: 1px solid green;
}

table td {
	border: 1px solid blue;
	width: 100%;
	margin: 0 0 0 auto;
}
</style>
	</head>
<body>
<table>
<tr>
	<td>333333333333333333333333333333333333333333</td>
	<td>1111111111111111111111111111111111111111111111111111111111111111111</td>
	<td>22222222222222222222222222222222222222222222222</td>
</tr>
</table>
</body>
</html>

Если смотреть эту страницу с низким разрешением, то она не будет растягивать элемент body. Возможно ли сделать так, чтобы body растягивлся по таблице, а не подстраивался под разрешение ?, т.е. чтоб ширина таблицы == ширина боди

Уже довольно долго бьюсь над проблемой.

Заранее спасибо

Edited July 2, 2010 by Razor

psywalker · July 2, 2010

1) Теги нужно закрывать, у тебя я этого не вижу к сожалению.

2) Попробуй такой вариант

<!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" xml:lang="ru" lang="ru" dir="ltr">
<head>
	<title>таблица</title>
<style>
html, body {

	margin: 0;
	padding: 0;
	width: 100%;
}
body {

}

table td {
	border: 1px solid blue;
	width: 100%;
	margin: 0 0 0 auto;
}
table { width: 100%; border-collapse: collapse;}
</style>
	</head>
<body>
<div style="overflow: hidden;">
<table>
<tr>
	<td>333333333333333333333333333333333333333333</td>
	<td>1111111111111111111111111111111111111111111111111111111111111111111</td>
	<td>22222222222222222222222222222222222222222222222</td>
</tr>
</table>
</div>
</body>
</html>

Razor · July 2, 2010

да, с тегами напортачил, сори. поправил.

да и можно былоб к body {overflow: hidden;} приписать, чтоб лишнего нагромождения не делать.

но такой вариант не устраивает ( нужно чтоб body тянулось

npofopr · July 2, 2010

дак поставьте пробелы

Razor · July 2, 2010

дак поставьте пробелы

да не суть, может в таблице будут размещаться изображения большие, в которых проблемы поставить не возможно.

psywalker · July 2, 2010

а что если js проверять размер таблицы и подставлять его боди?

Razor · July 2, 2010

да я этот вариант рассматривал, но всеже думал может какое-то решение без ЯС есть)

psywalker · July 2, 2010

Попробуй такой, жестокий ход)

<!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" xml:lang="ru" lang="ru" dir="ltr">
<head>
	<title>таблица</title>
<style>
html, body {
	margin: 0;
	padding: 0;

}

body {
	border: 5px solid #000;
	float: left;

}

table td {
	border: 1px solid blue;
	width: 100%;
	margin: 0 0 0 auto;
}
table { width: 100%; border-collapse: collapse; float: left;}
</style>
	</head>
<body>

<table>
<tr>
	<td>333333333333333333333333333333333333333333</td>
	<td>1111111111111111111111111111111111111111111111111111111111111111111</td>
	<td>22222222222222222222222222222222222222222222222</td>
</tr>
</table>

</body>
</html>

npofopr · July 2, 2010

вы не как не сделаете этого, для текста надо вставлять пробелы.

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

а текст вы никак не "раздробите"

а если JS, то http://habrahabr.ru/blogs/css3/91500/

Razor · July 2, 2010

psywalker, хмм, вроде работает. даже

table { width: 100%; border-collapse: collapse; float: left;}

не обязательно на сколько я понял. все заключается в body {float: left;}.

Спасибо большое)

в IE 7, 8 однако не работает (

psywalker · July 2, 2010

Да, в ие6-7 косяк, это явно.

Razor · July 2, 2010

Да, в ие6-7 косяк, это явно.

не-не, ие6 норм, 7-8 косяк ))) хотя странно что в 8...

Razor · July 2, 2010

<!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" xml:lang="ru" lang="ru" dir="ltr">
<head>
	<title>таблица</title>
<style>
html, body {

	position: absolute;
	padding: 0;
	border: 2px solid green;
}

body {
	border: 5px solid #000;
	position: absolute;
}

table#t1 td {
	border: 1px solid blue;
	width: 100%;
	margin: 0 0 0 auto;
}
table#t1 { width: 100%; border-collapse: collapse; float: left;}
</style>
	</head>
<body>

<table id="t1">
<tr>
	<td>333333333333333333333333333333333333333333</td>
	<td>1111111111111111111111111111111111111111111111111111111111111111111</td>
	<td>22222222222222222222222222222222222222222222222</td>
</tr>
</table>

<br/><br/><br/>

<table style="border: 1px solid green; width: 100%;">
	<tr><td>fff</td></tr>
</table>

</body>
</html>

вот еще вариант придумал, но незнаю - как вытянуть таблику вторую (блок) на 100% родительского элемента, который абсолютно позиционирован - возможно?

это я про ИЕ 6, 7

psywalker · July 2, 2010

Ну это уже слишком жёсткий ход) Даже жёстче, чем я показал.

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

Razor · July 2, 2010

relative не помогает , пробывал так уж. ох жесть(

Sign In

Как сделать, чтобы таблица растягивала body

Question

Link to comment

Share on other sites

14 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

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information