Архитектура электронного правительства: Единая архитектура – это методологический подход при создании системы управления государства, который строится...
Индивидуальные и групповые автопоилки: для животных. Схемы и конструкции...
Архитектура электронного правительства: Единая архитектура – это методологический подход при создании системы управления государства, который строится...
Индивидуальные и групповые автопоилки: для животных. Схемы и конструкции...
Топ:
Методика измерений сопротивления растеканию тока анодного заземления: Анодный заземлитель (анод) – проводник, погруженный в электролитическую среду (грунт, раствор электролита) и подключенный к положительному...
Организация стока поверхностных вод: Наибольшее количество влаги на земном шаре испаряется с поверхности морей и океанов...
Генеалогическое древо Султанов Османской империи: Османские правители, вначале, будучи еще бейлербеями Анатолии, женились на дочерях византийских императоров...
Интересное:
Распространение рака на другие отдаленные от желудка органы: Характерных симптомов рака желудка не существует. Выраженные симптомы появляются, когда опухоль...
Средства для ингаляционного наркоза: Наркоз наступает в результате вдыхания (ингаляции) средств, которое осуществляют или с помощью маски...
Наиболее распространенные виды рака: Раковая опухоль — это самостоятельное новообразование, которое может возникнуть и от повышенного давления...
Дисциплины:
 2020-05-07 |
 193 |
из
5.00
|
Заказать работу |
|
|
|
|
Вы можете сказать: - так, мы убрали промежуток между ячейками, используя свойство border-spacing со значением 0, но почему у нас теперь границы у ячеек то пересекаются?
Двойные границы образуются из-за того, что нижняя граница одной ячейки добавляется к верхней границе ячейки, которая находится под ней, аналогичная ситуация происходит по бокам ячеек и это логично с точки зрения отображения таблицы, но к счастью есть способ, сообщить браузеру, что мы не хотим видеть такое развязное поведение границ ячеек.
Для этого необходимо использовать CSS свойство border-collapse. Как не странно, но использование свойства border-collapse со значением collapse является лучшим способом как можно убрать промежуток между ячейками и при этом не получить двойных границ между ними.
Рассмотрим сравнение поведения границ при использовании свойства border-spacing со значением 0 и свойства border-collapse со значением collapse:
<!DOCTYPE html>
<html>
<head>
<title> Пример отображения границ вокруг ячеек таблицы </title>
<style>
table {
float: left; /* таблицы становятся плавающими элементами, смещенными по левому краю */
margin-right: 30px; /* устанавливаем внешние отступы справа */
}
td, th {
border: 5px solid #F50; /* задаем сплошную границу размером 5 пикселей цвета #F50 */
width: 50px; /* ширина ячеек */
height: 75px; /* высота ячеек */
}
caption {
font-weight: bold; /* жирное начертание */
}
.first {
border-spacing: 0; /* промежуток между ячейками таблицы отсутствует */
}
.second {
border-collapse: collapse; /* объединяем границы ячеек в одну */
}
</style>
</head>
<body>
<table class = "first" >
<caption> border-spacing: 0; </caption>
<tr>
|
|
<th> 1 </th><th> 2 </th><th> 3 </th>
</tr>
<tr>
<td> 2 </td><td></td><td></td>
</tr>
<tr>
<td> 3 </td><td></td><td></td>
</tr>
</table>
<table class = "second" >
<caption> border-collapse: collapse; </caption>
<tr>
<th> 1 </th><th> 2 </th><th> 3 </th>
</tr>
<tr>
<td> 2 </td><td></td><td></td>
</tr>
<tr>
<td> 3 </td><td></td><td></td>
</tr>
</table>
</body>
</html>
В данном примере мы:
· Сделали наши таблицы плавающими и сместили по левому краю (float: left), установили для них внешний отступ справа равный 30px.
· Установили для наименования таблицы (тег <caption>) – жирное начертание.
· Для ячеек таблицы (заголовочные и ячейки данных) мы установили сплошную границу размером 5 пикселей шестнадцатеричным цветом #F50 и установили фиксированную ширину 50px и высоту 75 пикселей.
|
|
· Для первой таблицы с классом .first мы установили промежуток между ячейками таблицы равный нулю (border-spacing: 0;), а для второй таблицы с классом .second установили свойство border-collapse со значением collapse, которое объединяет границы ячеек в одну, когда это возможно.
Результат нашего примера:
Рис. 146 Пример отображения границ вокруг ячеек таблицы.
Свойство border-collapse имеет всего два значения для отображения границ вокруг ячеек таблицы:
| Значение | Описание |
| separate | Отдельно стоящие границы (свойства border-spacing и empty-cells не будут игнорироваться). Это значение по умолчанию. |
| collapse | Границы объединяются в одну, когда это возможно (свойства border-spacing и empty-cells игнорируются). |
Обратите внимание, что когда мы используем свойство border-collapse со значением collapse такие свойства как border-spacing и empty-cells игнорируются (не употребляйте их одновременно)! Стоп, а что за empty-cells?
Поведение пустых ячеек
Силами CSS можно установить, следует ли отображать границы и фон пустых ячеек в таблице или нет. За это поведение отвечает свойство empty-cells, которое по умолчанию, как вы могли заметить из предыдущих примеров, отображает пустые ячейки.
Давайте перейдем к примеру:
<!DOCTYPE html>
<html>
<head>
<title> Пример отображения пустых ячеек таблицы </title>
<style>
table {
float: left; /* таблицы становятся плавающими элементами, смещенными по левому краю */
margin-right: 30px; /* устанавливаем внешние отступы справа */
}
td, th {
border: 1px solid #F50; /* задаем сплошную границу размером 1 пиксель цвета #F50 */
width: 75px; /* ширина ячеек */
height: 50px; /* высота ячеек */
background: wheat; /* задаем цвет заднего фона ячеек */
}
caption {
font-weight: bold; /* жирное начертание */
}
.first {
empty-cells: show; /* показывать пустые ячейки (по умолчанию) */
}
.second {
empty-cells: hide; /* скрывать пустые ячейки */
}
</style>
</head>
<body>
<table class = "first" >
<caption> empty-cells: show; </caption>
<tr>
<th> 1 </th><th> 2 </th><th> 3 </th>
</tr>
<tr>
<td> 2 </td><td></td><td> ☺ </td>
|
|
</tr>
<tr>
<td> 3 </td><td> ☺ </td><td></td>
</tr>
</table>
<table class = "second" >
<caption> empty-cells: hide; </caption>
<tr>
<th> 1 </th><th> 2 </th><th> 3 </th>
</tr>
<tr>
<td> 2 </td><td></td><td> ☺ </td>
</tr>
<tr>
<td> 3 </td><td> ☺ </td><td></td>
</tr>
</table>
</body>
</html>
Понять, как действует свойство empty-cells из этого примера очень просто, если для него установлено значение hide, то пустые ячейки и фон в них будут скрыты, если установлено значение show (по умолчанию), то они будут отображаться.
Рис. 147 Пример отображения пустых ячеек таблицы.
|
|
|
Индивидуальные очистные сооружения: К классу индивидуальных очистных сооружений относят сооружения, пропускная способность которых...
Опора деревянной одностоечной и способы укрепление угловых опор: Опоры ВЛ - конструкции, предназначенные для поддерживания проводов на необходимой высоте над землей, водой...
Организация стока поверхностных вод: Наибольшее количество влаги на земном шаре испаряется с поверхности морей и океанов (88‰)...
Наброски и зарисовки растений, плодов, цветов: Освоить конструктивное построение структуры дерева через зарисовки отдельных деревьев, группы деревьев...
© cyberpedia.su 2017-2024 - Не является автором материалов. Исключительное право сохранено за автором текста.
Если вы не хотите, чтобы данный материал был у нас на сайте, перейдите по ссылке: Нарушение авторских прав. Мы поможем в написании вашей работы!