Адаптации растений и животных к жизни в горах: Большое значение для жизни организмов в горах имеют степень расчленения, крутизна и экспозиционные различия склонов...
Типы сооружений для обработки осадков: Септиками называются сооружения, в которых одновременно происходят осветление сточной жидкости...
Топ:
Оснащения врачебно-сестринской бригады.
Техника безопасности при работе на пароконвектомате: К обслуживанию пароконвектомата допускаются лица, прошедшие технический минимум по эксплуатации оборудования...
Проблема типологии научных революций: Глобальные научные революции и типы научной рациональности...
Интересное:
Распространение рака на другие отдаленные от желудка органы: Характерных симптомов рака желудка не существует. Выраженные симптомы появляются, когда опухоль...
Финансовый рынок и его значение в управлении денежными потоками на современном этапе: любому предприятию для расширения производства и увеличения прибыли нужны...
Уполаживание и террасирование склонов: Если глубина оврага более 5 м необходимо устройство берм. Варианты использования оврагов для градостроительных целей...
Дисциплины:
 2020-05-07 |
 189 |
из
5.00
|
Заказать работу |
Содержание книги
Поиск на нашем сайте
|
|
|
|
В CSS по умолчанию используется алгоритм автоматического размещения макета таблицы браузером. В этом случае ширина столбца задается самым широким неразрывным содержимым ячейки. Данный алгоритм может быть в некоторых случаях медленным, так как браузер должен прочитать все содержимое в таблице, прежде чем определить её окончательный макет.
Чтобы изменить тип размещения макета таблицы браузером с автоматического на фиксированный, необходимо использовать CSS свойство table-layout со значением fixed.
В этом случае горизонтальное размещение зависит только от ширины таблицы и ширины столбцов, а не от содержимого ячеек. Браузер начинает отображать таблицу сразу после того, как получена первая строка. Как следствие, фиксированный алгоритм, позволяет создавать макет такой таблицы быстрее, чем используя автоматический вариант. При работе с большими таблицами в целях увеличения производительности вы можете использовать фиксированный алгоритм.
Давайте рассмотрим применение этого свойства на следующем примере:
<!DOCTYPE html>
<html>
<head>
<title> Примериспользованиясвойства table-layout </title>
<style>
table {
width: 50%; /* задаемширинутаблицы */
word-wrap: break-word; /* словоможетбытьпрервановпроизвольномместе */
}
td, th {
border: 1px solid Chocolate; /* задаемсплошнуюграницуразмером 1 пиксельцветашоколад */
}
.test {
table-layout: auto; /* автоматический алгоритм размещения макета таблицы браузером (по умолчанию) */
}
.test2 {
table-layout: fixed; /* фиксированный алгоритм размещения макета таблицы браузером */
}
</style>
</head>
<body>
<table class = "test" >
<caption> table-layout: auto; </caption>
<tr>
<th> Наименование </th><th> 2009 </th><th> 2010 </th><th> 2011 </th><th> 2012 </th><th> 2013 </th><th> 2014 </th><th> 2015 </th><th> 2016 </th>
</tr>
<tr>
<td> Пшеница </td><td> 125 </td><td> 215 </td><td> 2540 </td><td> 33287 </td><td> 695878 </td><td> 1222222 </td><td> 125840000 </td><td> 125 </td>
</tr>
</table>
<table class = "test2" >
<caption> table-layout: fixed; </caption>
<tr>
<th> Наименование </th><th> 2009 </th><th> 2010 </th><th> 2011 </th><th> 2012 </th><th> 2013 </th><th> 2014 </th><th> 2015 </th><th> 2016 </th>
</tr>
<tr>
<td> Пшеница </td><td> 125 </td><td> 215 </td><td> 2540 </td><td> 33287 </td><td> 695878 </td><td> 1222222 </td><td> 125840000 </td><td> 125 </td>
</tr>
</table>
</body>
</html>
В данном примере мы:
· К одной и той же таблице применили различные алгоритмы размещения макета таблицы браузером. Для первой таблицы мы использовали автоматический алгоритм (auto). Обратите внимание, что при этом размер таблицы стал больше заданного значения в 50% от родительского элемента (произошло переполнение).
· Кроме того мы использовали для таблиц новое для вас свойство word-wrap 
, которое указывает браузеру, переносить или нет длинные слова, которые не помещаются по ширине в заданную область (разрешается ли разрывать строки внутри слов). Значение break-word указывает, что слово может быть прервано в произвольном месте, если нет допустимой точки для разрыва.
· Для второй таблицы был использован фиксированный алгоритм (fixed) размещения макета таблицы браузером. Как вы можете заметить размер таблицы соответствует заданным нами значениям ширины в процентах, а числа прерваны в произвольных местах, чтобы не произошло переполнение. Если бы мы не использовали свойство word-wrap , то ширина второй таблицы бы не изменилась, но числа переполнили бы ячейки (вышли из ячеек).
Рис. 151 Пример использования свойства table-layout.
|
|
|
Опора деревянной одностоечной и способы укрепление угловых опор: Опоры ВЛ - конструкции, предназначенные для поддерживания проводов на необходимой высоте над землей, водой...
Индивидуальные и групповые автопоилки: для животных. Схемы и конструкции...
Таксономические единицы (категории) растений: Каждая система классификации состоит из определённых соподчиненных друг другу...
Индивидуальные очистные сооружения: К классу индивидуальных очистных сооружений относят сооружения, пропускная способность которых...
© cyberpediasu.com 2017-2026 - Не является автором материалов. Исключительное право сохранено за автором текста.
Если вы не хотите, чтобы данный материал был у нас на сайте, перейдите по ссылке: Нарушение авторских прав. Мы поможем в написании вашей работы!
