K Die Seite wurde geleert. Markierung: Geleert |
KKeine Bearbeitungszusammenfassung |
||
| Zeile 1: | Zeile 1: | ||
/*** Formatierungen für Alle ***/ | |||
.spgrid { | |||
background-color:white; | |||
color: #222; | |||
margin: 0em 0; | |||
border: 0; | |||
} | |||
.spgrid td { | |||
background-color: #f8f9fa; | |||
border: 1px solid #a2a9b1; | |||
padding: 0.2em 0.1em; | |||
line-height:1.4; | |||
} | |||
.spgrid .Leerzeile { | |||
border-left: 0; | |||
border-right: 0; | |||
background: white; | |||
} | |||
.spgrid tr { | |||
display: grid; | |||
grid-template-columns: 50% 50%; | |||
width: 100%; | |||
} | |||
/*** Ende Formatierungen für Alle ***/ | |||
/*** Formatierungen Standard (=Monitor) ***/ | |||
.spgrid tr > td:nth-child(1) { | |||
padding: 15px; | |||
grid-column: 1 / 2; | |||
grid-row: 1; | |||
background-color: #eaecf0; | |||
border: 1px solid #a2a9b1; | |||
} | |||
.spgrid tr > td:nth-child(2) { | |||
padding: 15px; | |||
grid-column: 2 / 3; | |||
grid-row: 1; | |||
background-color: #eaecf0; | |||
border: 1px solid #a2a9b1; | |||
} | |||
.spgrid tr > td:nth-child(3) { | |||
padding: 15px; | |||
grid-column: 1 / 2; | |||
grid-row: 2; | |||
background-color: #f8f9fa; | |||
border: 1px solid #a2a9b1; | |||
} | |||
.spgrid tr > td:nth-child(4) { | |||
padding: 15px; | |||
grid-column: 2 / 3; | |||
grid-row: 2; | |||
background-color: #f8f9fa; | |||
border: 1px solid #a2a9b1; | |||
} | |||
/*** Ende Formatierungen Standard ***/ | |||
/*** Formatierungen für Breakpoint xs ***/ | |||
@media (max-width:576px) { | |||
.spgrid tr > td:nth-child(1) { | |||
padding: 15px; | |||
grid-column: 1 / 3; | |||
grid-row: 1; | |||
background-color: #eaecf0; | |||
border: 1px solid #a2a9b1; | |||
} | |||
.spgrid tr > td:nth-child(2) { | |||
padding: 15px; | |||
grid-column: 1 / 3; | |||
grid-row: 3; | |||
background-color: #eaecf0; | |||
border: 1px solid #a2a9b1; | |||
} | |||
.spgrid tr > td:nth-child(3) { | |||
padding: 15px; | |||
grid-column: 1 / 3; | |||
grid-row: 2; | |||
background-color: #f8f9fa; | |||
border: 1px solid #a2a9b1; | |||
} | |||
.spgrid tr > td:nth-child(4) { | |||
padding: 15px; | |||
grid-column: 1 / 3; | |||
grid-row: 4; | |||
background-color: #f8f9fa; | |||
border: 1px solid #a2a9b1; | |||
} | |||
} /*** Ende Formatierungen für Breakpoint xs ***/ | |||
Version vom 10. Juli 2019, 09:22 Uhr
/*** Formatierungen für Alle ***/
.spgrid {
background-color:white;
color: #222;
margin: 0em 0;
border: 0;
}
.spgrid td {
background-color: #f8f9fa;
border: 1px solid #a2a9b1;
padding: 0.2em 0.1em;
line-height:1.4;
}
.spgrid .Leerzeile {
border-left: 0;
border-right: 0;
background: white;
}
.spgrid tr {
display: grid;
grid-template-columns: 50% 50%;
width: 100%;
}
/*** Ende Formatierungen für Alle ***/
/*** Formatierungen Standard (=Monitor) ***/
.spgrid tr > td:nth-child(1) {
padding: 15px;
grid-column: 1 / 2;
grid-row: 1;
background-color: #eaecf0;
border: 1px solid #a2a9b1;
}
.spgrid tr > td:nth-child(2) {
padding: 15px;
grid-column: 2 / 3;
grid-row: 1;
background-color: #eaecf0;
border: 1px solid #a2a9b1;
}
.spgrid tr > td:nth-child(3) {
padding: 15px;
grid-column: 1 / 2;
grid-row: 2;
background-color: #f8f9fa;
border: 1px solid #a2a9b1;
}
.spgrid tr > td:nth-child(4) {
padding: 15px;
grid-column: 2 / 3;
grid-row: 2;
background-color: #f8f9fa;
border: 1px solid #a2a9b1;
}
/*** Ende Formatierungen Standard ***/
/*** Formatierungen für Breakpoint xs ***/
@media (max-width:576px) {
.spgrid tr > td:nth-child(1) {
padding: 15px;
grid-column: 1 / 3;
grid-row: 1;
background-color: #eaecf0;
border: 1px solid #a2a9b1;
}
.spgrid tr > td:nth-child(2) {
padding: 15px;
grid-column: 1 / 3;
grid-row: 3;
background-color: #eaecf0;
border: 1px solid #a2a9b1;
}
.spgrid tr > td:nth-child(3) {
padding: 15px;
grid-column: 1 / 3;
grid-row: 2;
background-color: #f8f9fa;
border: 1px solid #a2a9b1;
}
.spgrid tr > td:nth-child(4) {
padding: 15px;
grid-column: 1 / 3;
grid-row: 4;
background-color: #f8f9fa;
border: 1px solid #a2a9b1;
}
} /*** Ende Formatierungen für Breakpoint xs ***/