Как растянуть таблицу в html на всю страницу
Перейти к содержимому

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

  • автор:

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

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

Решение

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

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

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

HTML по теме

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

Популярные рецепты

  • Как добавить картинку на веб-страницу?
  • Как добавить иконку сайта в адресную строку браузера?
  • Как добавить фоновый рисунок на веб-страницу?
  • Как сделать обтекание картинки текстом?
  • Как растянуть фон на всю ширину окна?
  • Как выровнять фотографию по центру веб-страницы?
  • Как разместить элементы списка горизонтально?
  • Как убрать подчеркивание у ссылок?
  • Как убрать маркеры в маркированном списке?
  • Как изменить расстояние между строками текста?
  • Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
  • Как открыть ссылку в новом окне?

Выравнять таблицу на всю высоту страницы и по центру

И как всегда это бывает все поехало. Перестало работать растягивание страницы на всю высоту страницы. В чем дело? Тэг

и
мешает. Если его убрать — все работает, но проблема, таблица выровнена не по центру. Т.е. или одно или другое. Или высота 100% или выравнивание по центру. Вопрос прост. Как совместить желаемое? Высота таблички должна быть 100%, и выравнивание по центру страницы. P.s. Давно хотел задать вопрос уровня школьника но стеснялся. Даже обидно как то такое спрашивать. День пришел ))

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

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

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

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

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

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

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

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

Растянуть таблицу на всю ширину без отступов (CSS)

Чтобы растянуть таблицу на всю ширину браузера и по краям не было отступов, сперва необходимо обнулить внешние и внутренние отступы тегов и , затем установить значение width: 100% .

Пример

Растянуть таблицу на всю ширину без отступов (CSS) /** * Чтобы не было отступов, необходимо обнулить отступы * у тегов body и html */ html, body < margin: 0; padding: 0; >/** * Ставим ширину 100% */ table < width: 100%; border-collapse: collapse; >th, td

Колонка 1 Колонка 2 Колонка 3
Текст первой колонки Текст второй колонки Текст третьей колонки


✖ ❤ Мне помогла статья нет оценок
17848 просмотров нет комментариев chepro 17 сентября 2013

Категории

Читайте также

  • div height 100 (CSS)
  • Ссылка без подчеркивания
  • Размер шрифта (CSS)
  • CSS хак (IE7)
  • CSS хак (IE8)
  • Запретить выделение текста (CSS)
  • Курсор рука (CSS)
  • Min-width для IE6
  • CSS меню картинками
  • Резиновая верстка div 3 колонки (HTML)
  • Как подключить CSS только для IE 6
  • Валидный HTML-тег HR

Комментарии

Написать комментарий
© Экспэнч 2010-2024
При полном или частичном копировании статей сайта указывайте пожалуйста ссылку на источник
Хотите узнать больше информации, пишите на: artem@expange.ru

Вход на сайт

Введите данные указанные при регистрации:

Социальные сети

Вы можете быстро войти через социальные сети:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *