Как сделать таблицу на весь экран html

Как растянуть таблицу в html

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

Например, чтобы растянуть таблицу на всю ширину страницы, можно задать ей ширину 100%:

 style="width:100%">  Заголовок 1 Заголовок 2 Заголовок 3   Ячейка 1 Ячейка 2 Ячейка 3

В этом примере таблица будет занимать всю ширину родительского элемента, в данном случае — всю ширину страницы.

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

 style="width:800px">  Заголовок 1 Заголовок 2 Заголовок 3   Ячейка 1 Ячейка 2 Ячейка 3

В этом примере таблица будет иметь фиксированную ширину 800 пикселей.

Как сделать таблицу на весь экран html

Сообщения: 364
Благодарности: 9

Народ подскажите, может кто сталкивался с такой проблемой. Надо растянуть таблицу на весь экран, как по ширине, так и по высоте. Это делается легко с помощью строк

Однако, если в начале перед стоит строчка

то команда height=»100%» не работает. Таблица правильно растягивается по всей ширине экрана, но не растягивается по высоте. Всё работает как надо, весь сайт отображается корректно, как и задумывалось, но вот height=»100%» отказывается работать.

А вот если написать перед вот такие строки

то команда height=»100%» начинает работать, но перестаёт работать всё остальное. Шапка сайта сразу начинает плыть, начинает как то странно работать CSS, по ведомым только Богу законам. Слетают часть шрифтов, а часть шрифтов работает нормально. Одним словом сайт превращается в АБРА-КОДАБРУ, зато команда height=»100%» работает прекрасно.

А вот сам вопрос. Как можно заставить работать height=»100%» со строками перед

Engrossed by the Void

Сообщения: 2229
Благодарности: 60

Доброго времени суток. При коротком доктайпе (html) броузер рисует страницу в режиме совместимости. Потому что доктайп неправильный в таком виде. В режиме совместимости может быть большой бардак ибо нет стандартов. В случае второго доктайпа (xhtml) броузер переключается в режим соответствия стандартам в котором у table нет атрибута высоты, ее предлагают регулировать с помощью стилей. Стало быть:
1) Решение растяжения по высоте
2) статья по доктайпам

——-
Не могу дать более дельный совет — не хватает системных ресурсов.

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

Сообщения: 364
Благодарности: 9

Всё не могу, мозги кипят, всё перепробовал. Этот стандарт W3C сразу не даётся моему пониманию.

Прочитал вышеизложенный текст и добавил с CSS

html,body height:100%;
margin:0px;
padding:0px
>

Таблицу растянуть на весь экран это помогло, но вот жёсткие размеры других частей этой же таблицы сбились. И теперь я не знаю что делать. Хотел найти ответ в интернете, но что то не нашёл. Собственно нужно вот что:

Сделать таблицу 100% ширины и высоты, нижней ячейке задать высоту к примеру 100px, верхней в 155px, а оставшуюся часть экрана (среднюю) растягивалась. Подскажите, как это можно реализовать с помощью CSS?

Engrossed by the Void

Сообщения: 2229
Благодарности: 60

IE впереди планеты всей. чистым CSS лично у меня не получилось, может дело в конце рабочей недели, но факт. В общем, используя маленький хак, имеем:

The table html, body < height:100%; margin: 0; padding: 0; >table < border: 0 none; border-collapse: collapse; >table td < padding: 0; border: 0 none; >table.rootTable < width: 100%; height: 100%; >table.rootTable td.header < background: red; height: 155px; >table.rootTable td.body < background-color: yellow; _height: expression(document.documentElement.clientHeight - 155 - 100 + 'px'); >table.rootTable td.footer

Сообщения: 364
Благодарности: 9

Вот тут то и самая загвостка. В Oper-е 9.20 всё отображается так как надо, а вот IE-7.0 верхняя часть таблицы стала 406px, средняя 50px, а нижняя 262px. И я не могу понять алгоритм, откуда IE-7.0 взял эти значения? Ведь они нигде не прописаны. Такое ощущение, что значения 407, 50 и 262рх IE-7.0 взял с потолка. Но как так получилось, ведь написано чёрному по белому

table.rootTable td.header background: red;
height: 155px;
>

Откуда IE-7.0 взял эти 406px? Вот над вопросом я бьюсь уже чуть больше недели. Столько уже всего перечитал и до сих пор не могу понять логику IE-7.0. На одном из форумов по Мамбе у одного админа была такая же проблема. И он ещё решил заменой

Я так попробовал, и действительно работает. И в IE-7.0 и в Oper-е 9.20 таблица отображается как надо. Верхняя часть таблицы как и надо 155px, нижняя 100px, а средняя растягивается. Но тут же слетают все шрифты заданные в CSS, плюс сразу начинает плыть шапка сайта и сайт превращается в абра-кодабру. Другое дело

И я ищу ответ, как с этим тэгом сделать так, что б в IE-7.0 таблица отображалось корректно.

forum.lissyara.su

Правила форума
Убедительная просьба юзать теги [code] при оформлении листингов.
Сообщения не оформленные должным образом имеют все шансы быть незамеченными.

Отправить тему по email
Версия для печати

Первое новое сообщение • 10 сообщений • Страница 1 из 1

RusBiT лейтенант Сообщения: 635 Зарегистрирован: 2007-08-03 11:43:53 Откуда: Красноярск Контактная информация:

[HTML] Таблица во весь экран

Пожаловаться на это сообщение
Цитата

Гуру, подскажите как создать таблицу с выравниванием по вертикали на весь экран?
Т.е. надо чтоб рамка таблицы заполняла весь экран Чем больше я познаю FreeBSD, тем больше я считаю себя ламером

RusBiT

Хостинг HostFood.ru

Услуги хостинговой компании Host-Food.ru

Тарифы на хостинг в России, от 12 рублей: https://www.host-food.ru/tariffs/hosting/
Тарифы на виртуальные сервера (VPS/VDS/KVM) в РФ, от 189 руб.: https://www.host-food.ru/tariffs/virtualny-server-vps/
Выделенные сервера, Россия, Москва, от 2000 рублей (HP Proliant G5, Intel Xeon E5430 (2.66GHz, Quad-Core, 12Mb), 8Gb RAM, 2x300Gb SAS HDD, P400i, 512Mb, BBU):
https://www.host-food.ru/tariffs/vydelennyi-server-ds/
Недорогие домены в популярных зонах: https://www.host-food.ru/domains/

schizoid подполковник Сообщения: 3228 Зарегистрирован: 2007-03-03 17:32:31 Откуда: Украина, Чернигов Контактная информация:

Как установить ширину таблицы через стили?

Установить ширину таблицы в пикселах или процентах через стили.

Решение

Для определения ширины таблицы используйте стилевое свойство width , применяя его к селектору table , как показано в примере 1.

Пример 1. Ширина таблицы

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Ширина таблицы

В данном примере ширина всей таблицы устанавливается как 100%, а ширина левой колонки 100px. Это достигается за счёт добавления свойства width к селектору td с именем определённого класса ( ).

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

HTML по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.