Внутреняя таблица выходит за пределы внешней. CSS.

JustUser · May 27, 2016

Приветствую!
Ребят, что-то меня заклинило, и никак я не могу решить простую, в общем-то, задачу. Собственно, задача: поместить несколько таблиц друг в друга (без каких-либо промежутков) во весь экран.
Когда содержимое внутренней таблицы не превышает высоту экрана, то всё хорошо. А вот когда контент не помещается, то таблица, соответственно, вырастает сообразно содержимому. А внешние-то table‘ы – нет! Так и остаются на месте. Как сделать так, чтобы они двигались вместе?

http://s017.radikal.ru/i405/1605/4e/d5119940ed94.jpg

http://s41.radikal.ru/i094/1605/75/58aae8416ead.jpg

Подскажите, пожалуйста, решение проблемы. Перепробовал кучу вариантов. Всё не то. Наверняка есть более элегантный способ сделать то же самое. Спасибо.

HTML:

<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="begin">
<table class="t1"><tr><td align="center" valign="top">
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<table class="t2"><tr><td align="center" valign="top">
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<table class="t3"><tr><td align="center" valign="top">
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
</td></tr></table>
</td></tr></table>
</td></tr></table>
</div>
</body>
</html>

CSS:

table.t1 {
 background-color: #004400;
 position: absolute;
 top: 0px; left: 0px;
 width: 100%; height: 100%;
 border: 12px solid #ff0000;}

table.t2 {
 background-color: #0000ff;
 position: absolute;
 top: 0px; left: 0px;
 width: 100%; height: 100%;
 border: 12px solid #ff9933;}

table.t3 {
 background-color: #440000;
 position: absolute;
 top: 0px; left: 0px;
 width: 90%; height: 100%;
 border: 12px solid #007700;}

p {color: #ffffff;}

klierik · May 27, 2016

Попробуй

* {
  box-sizing: Border-box;
}

Igor Schnaider · May 28, 2016

У вас всем таблицам назначен position: absolute. Значит, что они находятся теперь вне потока и не могут влиять на размеры своих родителей.

Sign In

Внутреняя таблица выходит за пределы внешней. CSS.

Question

JustUser

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

klierik

Link to comment

Share on other sites

Igor Schnaider

Link to comment

Share on other sites

Join the conversation

Similar Content

Обсуждения

Forums

Important Information