| Kosten | Понедельник, 07 Октября 2019, 11:07 | Сообщение 1 |
| Эти таблицы были созданы с адаптивным дизайном для мобильных устройств, поэтому они будут располагаться рядом в горизонтальной компоновке и возвращаться к вертикальной компоновке при отображении на небольших мобильных устройствах. Это расположение таблиц содержит две таблицы шириной 280 пикселей. Чтобы две таблицы были центрированы на странице, я поместил их в элемент Div, который немного шире, чем две таблицы, а затем центрировал элемент Div на странице.
Затем я поместил одну таблицу влево, а другую — вправо в пределах этого Div, что оставляет небольшое пространство между двумя таблицами. Таблицы будут естественно сворачиваться одна под другой, когда пространство будет уменьшаться (например, когда эта страница отображается на планшете или iPhone.
Такое расположение устраняет необходимость в наличии полей слева или справа от каждой таблицы для центрирования их на странице, а затем необходимости отбирать отступы для мобильных устройств в медиа запросах. Эта конструкция также исключает использование третьей таблицы для включения других, что также исключает необходимость использования встроенного элемента в двух таблицах, чтобы они лежали рядом друг с другом. Также см. Инструкции по настройке нескольких таблиц в HTML на одной странице.
HTML-код для гибкой настройки 2-таблицы
HTML
Код <div class="blok"> <table class="adapsuvnem floatleft"><tr><td><img src="http://zornet.ru/_fr/24/4743171.png" alt="name"><br>Название</td><td class="kuvnemdalno" style="line-height:1.0; text-align:left;">AMD объявила о новых поощрительных программах для геймеров, рассматривающих решение Ryzen или Radeon. Если вы находитесь на рынке. </td></tr></table> <table class="adapsuvnem floatleft"><tr><td><img src="http://zornet.ru/_fr/24/5154088.png" alt="name"><br>Название</td><td class="kuvnemdalno" style="line-height:1.0; text-align:left;">В то время как растут страхи перед искусственным интеллектом и мощными технологиями, легко забыть, что социальная инженерия. </td></tr></table> </div>
Код CSS для 2 горизонтальных таблиц
CSS
Код table.adapsuvnem{
border:3px solid #000;
width:17.500em;
/*280px */ margin:5px;
border-collapse: collapse;
float: left;
/*Задаем обтекание*/ }
table.adapsuvnem td{
font-size:100%;
padding: 5px;
text-align:center;
vertical-align:top;
}
table.adapsuvnem td:nth-child(odd){
font-weight:bold;
width:50%;
}
table.adapsuvnem td:nth-child(even){
font-weight:normal;
width:50%;
}
@media only screen and (min-width : 768px) and (max-width : 959px) and (orientation:portrait){
.adapsuvnem{
float:none;
width:100%;
display:block;
margin:0 auto;
}
}
Демонстрация
CSS заметки для таблиц
Когда вы называете таблицу, вам нужно выбрать имя, которое описывает эту таблицу из всех других на вашем сайте. Удалены границы вокруг ячеек в каждой таблице, используя border: collapse. Исправлены em для ширины, поэтому таблицы будут сжиматься на небольших мобильных устройствах. Внутри каждой ячейки есть отступы в 5px. td: nth-child позволяет одной ячейке иметь жирный текст (под цветком), а не другую ячейку (текст), плюс вы можете указать разную ширину для каждой ячейки, если хотите.
CSS заметки для Div
Помечены элементы Div, которые, что используют как контейнеры, классом для «ящиков», но вы можете назвать его контейнерами или оболочками или как угодно. По умолчанию в качестве элементов Div будет использоваться вся ширина страницы или контейнера, для которых необходимо указать ширину.
| | Страна: (RU) |
| |
