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 ***/