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

Leave a Comment / Html / By /

Фиксируем размер ячеек HTML таблицы с помощью CSS3

CMS
  • Recluse
  • 21.05.2017
  • 18 391
  • 2
  • 18.08.2020
  • 20
  • 19
  • 1
  • Содержание статьи
    • Фиксированный размер ячеек через CSS
    • Комментарии к статье ( 2 шт )
    • Добавить комментарий

Если в процессе создания таблицы, вам необходимо зафиксировать размер ячеек в определенном столбце, то с помощью третьей версии CSS это достаточно легко сделать. В интернете довольно часто предлагают методы с использованием colspan, или указанием размера ячейки прямо в её теге (пример: <td>).

С помощью CSS все это можно сделать гораздо легче.

И так, допустим у нас есть таблица со списком исполнителей электронной музыки:

<table>
<tr><td>Kraftwerk</td><td>1969</td><td>Германия</td></tr>
<tr><td>Deutsch Amerikanische Freundschaft</td><td>1978</td><td>Германия</td></tr>
<tr><td>Front 242</td><td>1981</td><td>Бельгия</td></tr>
</table>

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

table {
	table-layout:fixed; width:450px;
}
table td {
	overflow:hidden;
}
table td:nth-of-type(1) {
	width:200px;
}
table td:nth-of-type(2) {
	width:75px;
}
table td:nth-of-type(3) {
	width:175px;
}

Как можно догадаться, table td:nth-of-type(1), table td:nth-of-type(2) и table td:nth-of-type(3) содержат цифры колонок, а параметр width отвечает за их ширину.

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

<table>
<tr><td>Kraftwerk</td><td>1969</td><td>Германия</td></tr>
<tr><td>Deutsch Amerikanische Freundschaft</td><td>1978</td><td>Германия</td></tr>
<tr><td>Front 242</td><td>1981</td><td>Бельгия</td></tr>
</table>

То и CSS код должен быть следующим:

table.music {
	table-layout:fixed; width:450px;
}
table.music td {
	overflow:hidden;
}
table.music td:nth-of-type(1) {
	width:200px;
}
table.music td:nth-of-type(2) {
	width:75px;
}
table. music td:nth-of-type(3) {
	width:175px;
}

И еще одна важная деталь — если в вашей таблице используется заголовок вида <thead>, то для его ячеек <th> придется так же прописывать ширину, как и для ячеек <td>, в противном случае этот способ не будет работать. Т. е. теперь CSS будет выглядеть вот так:

table.music {
	table-layout:fixed; width:450px;
}
table.music td,
table.music th {
	overflow:hidden;
}
table.music td:nth-of-type(1),
table.music th:nth-of-type(1) {
	width:200px;
}
table.music td:nth-of-type(2),
table.music th:nth-of-type(2) {
	width:75px;
}
table.music td:nth-of-type(3),
table.music th:nth-of-type(3) {
	width:175px;
}

Проблема в том, что ширина таблиц зависит от контента

Артём Поликарпов

Содержимое таблицы не будет влиять на расчёт её ширины, если сказать ей table-layout: fixed:

КонстантинКонстантинопольский

Я не знаю, какая задача перед вами стоит, но предположу, что если исходное поведение таблиц вас не устраивает, возможно, вам вообще стоит отказаться от таблиц, так как table-layout: fixed отключает некоторые специальные свойства, которые часто и оправдывают целесообразность табличной вёрстки.

Попробуем разобраться.

В «фиксированном» режиме браузер расчитывает ширину колонок на основе значений из первой строки или тегов <col>. Если такие значения получить нельзя, таблица делится на колонки равной ширины. При этом содержимое, выходящее за пределы ячейки, обрезается либо накладывается на следующую ячейку. Для правильной работы этого значения должна быть задана ширина таблицы.

В стандартном режиме (table-layout: auto), браузер сначала загружает и анализирует содержимое ячеек, а затем отображает. Если у колонки не указана ширина, она пропорциональна количеству содержимого:

Общеизвестно, что тоталитарный тип политической культуры интегрирует антропологический тип общественной культуры, впрочем, это несколько не совпадает с концепцией. Парадигма трансформации общества теоретически определяет политический процесс в современной России.

Идеология неоднозначна.Капиталистическое мировое общество, на первый взгляд, означает коллапс Советского Союза, что неминуемо повлечет эскалацию напряжения в стране.

Указанные значения ширины колонок применяются до тех пор, пока их содержимое не выходит за пределы:

25% 50% 25%

В противном случае невлезающий контент распирает колонку и она отнимает место у других ячеек:

25%

150px × 50px

50% 25%

А если отнимать уже нечего, распирает таблицу:

25%

150px × 50px

50%

150px × 50px

25%

150px × 50px

Использовать таблицы в стандартном режиме компоновки для модульной сетки опасно — колонки могут непредсказуемо разъехаться. Более того, для расчёта размеров большой таблицы может потребоваться ощутимое время.

Также в документации сказано, что браузеры могут использовать свои алгоритмы и правила для отрисовки таблиц при значении table-layout: auto — будьте осторожны.

Ещё один наглядный пример, переключайте радио-кнопки:

#table-layout-example TABLE {
  width: 300px;
  table-layout: auto
                fixed;
  }

300px

100px

125px

85px

100px

Предлагаю уважаемым советчикам собрать уместные примеры применения разных значений table-layout и таблиц вообще.

Поздравляю читательниц с 8 Марта 🙂

P.
S.

Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Размеры таблиц HTML

❮ Назад Далее ❯

HTML-таблицы могут иметь разные размеры для каждого столбца, строки или весь стол.

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

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

Чтобы установить ширину таблицы, добавьте стиль атрибут к элементу

:

Пример

Установить ширину таблицы на 100%:

<таблица>


   
   
   


   
   
   

 
   
   
   
 
Имя Фамилия Возраст
Джилл Смит 50
Ева Джексон 94

Попробуйте сами »

Примечание: Использование процента в качестве единицы измерения ширины означает насколько широким будет этот элемент по сравнению с его родительским элементом, который в данном случае это <тело> элемент.

Ширина столбца таблицы HTML

Чтобы задать размер определенного столбца, добавьте стиль атрибут на или элемент:

Пример

Установите ширину первого столбца на 70%:



   
   
   


   
   
   

 
   
   
   
 
Имя Фамилия Возраст
Джилл		 Смит 50
Ева Джексон 94

Попробуйте сами »

Высота строки таблицы HTML

Чтобы установить высоту определенной строки, добавьте стиль атрибут элемента строки таблицы:

Пример

Установите высоту второй строки в 200 пикселей:



   
   
   


   
   
   

 
   
   
   
 
Имя Фамилия Возраст
Джилл Смит 50
Ева Джексон 94

Попробуйте сами »

HTML-упражнения

Проверьте себя с помощью упражнений

Упражнение:

Используйте стили CSS, чтобы сделать таблицу шириной 300 пикселей.

<таблица>
  <тр>
    Имя
    Фамилия
    Очки
  
  <тр>
    Джилл
    Смит
    50
  

Начать упражнение


❮ Предыдущий Далее ❯


NEW

Мы только что запустили
видео W3Schools

Узнать

ПАЛИТРА ЦВЕТОВ
КОД ИГРЫ

Играть в игру

Лучшие учебники
Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

900 Справочник

900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3. CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

ФОРУМ | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

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

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