Вложенные таблицы с использованием CSS

cyrilus · January 17, 2010

Подскажите, пожалуйста...

Имеем такой код:

<HTML>
<HEAD>
<TITLE>Опять таблица</TITLE>
<STYLE>
TD {width: 30px; height: 30px; text-align: center}
TD.big {border: none; text-align: center}
</STYLE>
</HEAD>
<BODY>
<TABLE width="100%" height="100%">
<TR>
<TD class="big">
<TABLE>
<TR><TD>1</TD>
<TD>2</TD></TR>
<TR><TD>3</TD>
<TD>4</TD></TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

не происходит горизонтального выравнивания центральной (внутренней) таблицы.

Но если убрать общий стиль для TD, т.е. добавить, например, к нему имя TD.crs, чтобы он не распространялся на элементы TD по умолчанию, то это выравнивание возникнет.

Почему так?

И второй вопрос. Почему игнорируются указанные в этом стиле размеры?

Edited January 17, 2010 by cyrilus

psywalker · January 17, 2010

1) Скриншот того, что хочешь получить, с подробным объяснением

2) Ссылку на страницу с косяками

cyrilus · January 17, 2010

1) Скриншот того, что хочешь получить, с подробным объяснением
2) Ссылку на страницу с косяками

Страницы у меня нет - правилами не требуется, если есть полный код страницы.

Скриншот может ввести участников в заблуждение. Вопрос не в том, чтобы что-то получить, а в том, чтобы объяснить: почему так странно работает CSS-стиль. Результат работы будет виден, если внести в код описанные изменения.

psywalker · January 17, 2010

Страницы у меня нет - правилами не требуется, если есть полный код страницы.
Скриншот может ввести участников в заблуждение. Вопрос не в том, чтобы что-то получить, а в том, чтобы объяснить: почему так странно работает CSS-стиль. Результат работы будет виден, если внести в код описанные изменения.

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

По сабжу:

1) Где доктайп?

2) Вот этой таблице в середине задай margin: 0 auto;

<TABLE>
<TR><TD>1</TD>
<TD>2</TD></TR>
<TR><TD>3</TD>
<TD>4</TD></TR>
</TABLE>

cyrilus · January 17, 2010

На будущее запомни, чем лучше и чётче ты изложишь свою проблему, тем у тебя больше шансов что тебе помогут.
По сабжу:
1) Где доктайп?
2) Вот этой таблице в середине задай margin: 0 auto;
<TABLE>
<TR><TD>1</TD>
<TD>2</TD></TR>
<TR><TD>3</TD>
<TD>4</TD></TR>
</TABLE>

Вот так?

<TABLE style="margin: 0 auto">
<TR><TD>1</TD>
<TD>2</TD></TR>
<TR><TD>3</TD>
<TD>4</TD></TR>
</TABLE>

что-то не вижу разницы...

psywalker · January 17, 2010

Я спрашивал, где Доктайп?

Приведи мне полный код!

cyrilus · January 17, 2010

Я открывал файл с этим кодом таким, какой есть, IE-7.

Но, хорошо, добавлю доктайп. Проблема осталась.

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Опять таблица</TITLE>
<STYLE>
TD {width: 30px; height: 30px; text-align: center}
TD.big {border: none; text-align: center}
</STYLE>
</HEAD>
<BODY>
<TABLE width="100%" height="100%">
<TR>
<TD class="big">
<TABLE style="margin: 0 auto">
<TR><TD>1</TD>
<TD>2</TD></TR>
<TR><TD>3</TD>
<TD>4</TD></TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

psywalker · January 17, 2010

Но, хорошо, добавлю доктайп.

Спасибо тебе огромное

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Опять таблица</TITLE>
<STYLE>
table.table { width: 100%;}
TD {width: 30px; height: 30px; text-align: center}
TD.big {border: none; text-align: center; width: 100%;}
</STYLE>
</HEAD>
<BODY>
<TABLE class="table" width="100%" height="100%">
<TR>
<TD class="big">
<TABLE style="margin: 0 auto">
<TR><TD>1</TD>
<TD>2</TD></TR>
<TR><TD>3</TD>
<TD>4</TD></TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

cyrilus · January 17, 2010

Благодарю! Буду разбираться.

Sign In

Вложенные таблицы с использованием CSS

Question

cyrilus

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

cyrilus

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

cyrilus

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

cyrilus

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

cyrilus

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information