Как склеить две стороны двух таблиц?

In_Variant · June 14, 2009

Всем здрасте.

Заранее прошу меня извинить, если вопрос уже такой был, но я просто не знала по какому запросу мне его найти.

Короче проблема следующая.

МФ и Опреа не понимают padding-top:0 в .tb1.

код:

<html>
<head>
	<title>mysite</title>

	<style type="text/css">
		body{
		margin:0;
		background:black;
		color:white;
		scrollbar-base-color:gray;
		min-width:1000px;
		max-width:1500px;
		padding-top:2%;
		padding-bottom:0;
		}

		.tb1 {
		margin:0;
		padding: 0px;
		background:black;
		border: 0px;
		color: wtite;
		width:100%;
		padding-top:0;
		}

		.tb2{
		border: 4px solid red;
		width:200px;
		height:80%;
		}


	</style>

</head>

<body>
	<table height=100% border=3 class=tb1>
	<tr>
	<td>
		<table border=4 align=center class=tb2>
		<tr>
		<td>
		gggggg
		</td>
		</tr>

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

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

</html>

Вот что у меня в ИЕ

А вот как отображает лиса и опера:

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

Спасибо!

dyadya · June 14, 2009

Ставим доктайп:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Получаем:

In_Variant · June 14, 2009

Извиниясь, видимо не до конца изложила требования

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

ЗЫ и кстати, как тут заставить правильно работать код при вписывании доктайпа?

Edited June 14, 2009 by In_Variant

Tokolist · June 14, 2009

vertical-align: top;

In_Variant · June 17, 2009

vertical-align: top;

у меня по вашему совету не получается... у вас получается? вы пробовали?

Searcher · June 17, 2009

для начала укажите доктайп, без доктайпа все браузеры работают в своих стандартах и рендерят по-разному.

Edited June 17, 2009 by Searcher

In_Variant · June 17, 2009

для начала укажите доктайп, без доктайпа все браузеры работают в своих стандартах и рендерят по-разному.

Указала. Таблица сплюснулась. Совсем хорошо

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

я пробовала цсс'ом height:100% для body, для table (внешней), по-отдельности и одновременно. никакого результата =\

Searcher · June 17, 2009

Все значения параметров для указанного вами доктайпа должны быть в кавычках. Вообще привыкайте чтобы всегда значения параметров были в кавычках. Вот ваша запись <table height=100% border=3 class=tb1> считается броузером ошибочной и в результате свойства класса не применяется к таблице. Параметр height у таблицы теперь отсутствует, это все указывается через стили, также как и border. В результате надо так <table class="tb1">.

Поставте лучше какой-нибудь из этих доктайпов

Строгий HTML 4.01

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

Переходный HTML 4.01

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

Если вы поставили доктайп для XHTML то там еще много ограничений будет, используйте пока стандарты HTML.

И внимательно почитайте раздел сайта Шаг за шагом.

Ну и на этом же сайте htmlbook.ru прекрасный справочник css и html.

In_Variant · June 17, 2009

И внимательно почитайте раздел сайта Шаг за шагом.
Ну и на этом же сайте htmlbook.ru прекрасный справочник css и html.

Да этот сайт - моя настольная книга... просто я учусь... а соответственно и ошибки допускаю.

не судите строго=)

ща поищу инфу на этом сайте по поводу ошибочной записи. ну а если вы знаете где конкретно почитать про "ваша запись <table height=100% border=3 class=tb1> считается броузером ошибочной ", то можете сэкономить мне время.

Edited June 17, 2009 by In_Variant

Searcher · June 17, 2009

ща поищу инфу на этом сайте по поводу ошибочной записи. ну а если вы знаете где конкретно почитать про "ваша запись <table height=100% border=3 class=tb1> считается броузером ошибочной ", то можете сэкономить мне время.

Ошибочной она считается потомучто значения параметров не в кавычках. Это не надо уже нигде читать, достаточно это запомнить и с этого момента все значения параметров писать в кавычках. При типе html броузер еще исправляет вашу ошибку, а при типе xhtml параметр, чье значение не в кавычках, не учитывается.

In_Variant · June 17, 2009

Ошибочной она считается потомучто значения параметров не в кавычках. Это не надо уже нигде читать, достаточно это запомнить и с этого момента все значения параметров писать в кавычках. При типе html броузер еще исправляет вашу ошибку, а при типе xhtml параметр, чье значение не в кавычках, не учитывается.

поставила все в кавычки. результат не меняется.

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

	<style type="text/css">
		body{
		margin:0;
		background:black;
		color:white;
		scrollbar-base-color:gray;
		width:100%;
		height:100%;
		min-width:1000px;
		max-width:1500px;
		padding-top:2%;
		min-height:800px;
		}

		.tb1 {
		margin:0;
		padding: 0px;
		background:black;
		border: 3px solid #ffffff;
		color: wtite;
		width:100%;
		height:100%;
		}

		.tb2{
		margin-top:0;
		border: 4px solid red;
		width:60%;
		height:80%;
		}
	</style> 
</head>
<body>
	<table cellpadding="0" cellspacing="0" class="tb1">
	<tr>
	<td>
		<table border="4" align="center" cellpadding="0" cellspacing="0" class="tb2">
		<tr>
		<td height="200px">
		<p>gggggg</p>
		</td>
		</tr>
		<tr>
		<td>
		<p>eeeeee</p>
		</td>
		</tr>
		</table>

	</td>
	</tr>
	</table>
</body>
</html>

Результат:

Я, наверно, чего-то не понимаю

LunatiK · June 17, 2009

В стилях добавь html {height:100%;}

Searcher · June 17, 2009

Не совсем понимаю, что вы хотите, может так:

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

	<style type="text/css">
		html {
		width:100%;
		height:100%;
		}

		body{
		margin:0;
		background:black;
		color:white;
		scrollbar-base-color:gray;
		width:100%;
		height:100%;
		min-width:1000px;
		max-width:1500px;
		padding:0;
		min-height:800px;
		}

		.tb1 {
		vertical-align:top;
		margin: 0;
		padding: 0;
		background:black;
		border: 3px solid #ffffff;
		color: wtite;
		width:100%;
		height:100%;
		}

		.tb2{
		margin-top:0;
		border: 4px solid red;
		width:60%;
		height:80%;
		}

		.tdTop {
		height:200px;
		}

		.tdVer {
		vertical-align:top;
		}


	</style>
</head>
<body>
	<table cellpadding="0" cellspacing="0" class="tb1">
	<tr>
	<td class="tdVer">
		<table border="4" align="center" cellpadding="0" cellspacing="0" class="tb2">
		<tr>
		<td class="tdTop">
		<p>gggggg</p>
		</td>
		</tr>
		<tr>
		<td>
		<p>eeeeee</p>
		</td>
		</tr>
		</table>

	</td>
	</tr>
	</table>
</body>
</html>

но учтите, ИЕ6 не понимает min-width, min-height и т.п.

Если вы хотите отступ сверху у боди сделать в 2%, то и высоту тогда у него делайте не 100%, а 98%.

А вообще, лучше это делать дивами, хотя там тоже будет не мало подводных камней.

Tokolist · June 17, 2009

у вас получается? вы пробовали?

Получается. Пробовал. В ячеек таблицы вертикальное выравнивание по умолчанию по центру.

Edited June 17, 2009 by Tokolist

In_Variant · June 17, 2009

Searcher, спасибо большое! идеальный код! все легло как по маслу! как надо=)

код в некоторых местах непонятен, но дальше я сама копать буду. Спасибо! очень помогли!

Единственное, что меня смутило: когда я ставлю в body{ height:98%; padding-top:2%; }, то у меня появляется вертикальная полоса прокрутки. Она появляется как в ие так и в опере и лисе. Причем, все бордеры на нулях и ничего вроде за экран не выходит, а если я ставлю height:96%, то полоса прокрутки исчезает. Думается мне что этот атрибут перекрывается чем-то еще... только не пойму чем.

Tokolist, LunatiK, вам тоже спасибо за совет.

Edited June 17, 2009 by In_Variant

Sign In

Как склеить две стороны двух таблиц?

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