redi/astro_avtourist
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: адаптивные стили для таблицы в global.css

Browse source
This commit is contained in:
Web-serfer 2026-05-03 20:07:19 +05:00
parent 208ad2d967
commit 39b58af7eb
1 changed files with 87 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

87
frontend/src/styles/global.css
View file

@ -62,4 +62,91 @@ html, body {
.post-content tr:hover td {
background: #f8fafc;
}
/* АДАПТИВНАЯ ТАБЛИЦА (DIV-STRUCTURE) */
/* Десктоп: 3 колонки в ряд */
.post-content > div:has(> div > div:nth-child(3)) {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0;
margin: 2rem 0;
border-radius: 0.5rem;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.post-content > div:has(> div > div:nth-child(3)) > div {
display: contents;
}
.post-content > div:has(> div > div:nth-child(3)) > div > div {
padding: 1rem;
border-bottom: 1px solid #e2e8f0;
background: #fff;
font-size: 0.95rem;
}
/* Заголовки (первая строка) */
.post-content > div:has(> div > div:nth-child(3)) > div:first-child > div {
background: #1e3a5f;
color: #fff;
font-weight: 700;
text-align: center;
}
/* Последняя строка без границы */
.post-content > div:has(> div > div:nth-child(3)) > div:last-child > div {
border-bottom: none;
}
/* Hover эффект */
.post-content > div:has(> div > div:nth-child(3)) > div:hover > div {
background: #f8fafc;
}
/* Мобильная версия */
@media (max-width: 768px) {
.post-content > div:has(> div > div:nth-child(3)) {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.post-content > div:has(> div > div:nth-child(3)) > div {
display: flex;
flex-direction: column;
background: #fff;
border-radius: 0.5rem;
overflow: hidden;
box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
/* Скрываем заголовки в мобильном */
.post-content > div:has(> div > div:nth-child(3)) > div:first-child {
display: none;
}
.post-content > div:has(> div > div:nth-child(3)) > div > div {
padding: 0.75rem 1rem;
border: none;
border-bottom: 1px solid #f1f5f9;
}
.post-content > div:has(> div > div:nth-child(3)) > div > div:last-child {
border-bottom: none;
}
/* Первый элемент в строке - метка */
.post-content > div:has(> div > div:nth-child(3)) > div > div:first-child {
background: #1e3a5f;
color: #fff;
font-weight: 600;
}
/* Остальные элементы - значения */
.post-content > div:has(> div > div:nth-child(3)) > div > div:not(:first-child) {
color: #64748b;
font-size: 0.85rem;
}
}