Книга: HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Параметры размеров
Параметры размеров
Для задания размеров — ширины и высоты — таблиц и их ячеек подойдут атрибуты стиля width и height, описанные в главе 10.
— Если требуется задать ширину или высоту всей таблицы, нужный атрибут стиля указывают именно для нее:
TABLE { width: 100 %; height: 300px }
— Если требуется задать ширину столбца, атрибут стиля width указывают для первой ячейки, входящей в этот столбец (листинг 12.2).
Листинг 12.2
<TABLE>
<TR>
<TH>Первый столбец</TH>
<TH>Второй столбец шириной в 40 пикселов</TH>
<TH>Третий столбец</TH>
</TR>
.
</TABLE>
— Если требуется задать высоту строки, атрибут стиля height указывают для первой ячейки этой строки (листинг 12.3).
Листинг 12.3
<TABLE>
.
<TR>
<TD>Строка высотой в 30 пикселов</TD>
.
</TR>
.
</TABLE>
Обычно все размеры, которые мы зададим для таблицы и ее ячеек, — не более чем рекомендация для Web-обозревателя. Если содержимое таблицы не будет в ней помещаться, Web-обозреватель увеличит ширину или высоту таблицы. Зачастую это может быть неприемлемо, поэтому стандарт CSS предусматривает средства, позволяющие изменить такое поведение Web-обозревателя.
Атрибут стиля table-layout позволяет указать, как Web-обозреватель будет трактовать размеры, заданные нами для таблицы и ее ячеек:
table-layout: auto|fixed|inherit
— auto — Web-обозреватель может изменить размеры таблицы и ее ячеек, если содержимое в них не помещается. Это обычное поведение.
— fixed — размеры таблицы и ее ячеек ни в коем случае изменяться не будут. Если содержимое в них не помещается, возникнет переполнение, параметры которого мы можем задавать с помощью атрибутов стиля overflow, overflow-x и overflow-y (см. главу 10).
Данный атрибут стиля применяется к самой таблице (тегу <TABLE>).
Пример:
TABLE { table-layout: fixed; overflow: auto }