KKeine Bearbeitungszusammenfassung |
KKeine Bearbeitungszusammenfassung |
||
| Zeile 29: | Zeile 29: | ||
grid-template-columns: 50% 50%; | grid-template-columns: 50% 50%; | ||
width: 100%; | width: 100%; | ||
} | |||
.spgrid .frei { | |||
border-left: 0; | |||
} | } | ||
| Zeile 144: | Zeile 147: | ||
} | } | ||
.spgrid .frei { | |||
display: none; | |||
} | |||
} /*** Ende Formatierungen für Breakpoint xs ***/ | } /*** Ende Formatierungen für Breakpoint xs ***/ | ||
Version vom 6. August 2019, 07:18 Uhr
/*** Bei Verwendung dieses css-Styles dürfen keine Tabellenüberschriften mit »!« formatiert werden
Tabellenlayout: 2-Spaltig, jede 2. Zeile als Überschrift ***/
/*** Formatierungen für Alle ***/
.spgrid {
background-color:white;
color: #222;
margin: 1em 0em;
width: 100%;
}
.spgrid td {
background-color: #f8f9fa;
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%;
}
.spgrid .frei {
border-left: 0;
}
/*** Ende Formatierungen für Alle ***/
/*** Formatierungen Standard (=Monitor) ***/
table { border: 0; }
.spgrid tr > td:nth-child(1) {
padding: 15px;
grid-column: 1 / 2;
grid-row: 1;
background-color: #eaecf0;
border-top: 1px solid #a2a9b1;
border-right: 1px solid #a2a9b1;
border-left: 1px solid #a2a9b1;
}
.spgrid tr > td:nth-child(2) {
padding: 15px;
grid-column: 2 / 3;
grid-row: 1;
background-color: #eaecf0;
border-top: 1px solid #a2a9b1;
border-right: 1px solid #a2a9b1;
}
.spgrid tr > td:nth-child(3) {
padding-top: 15px;
grid-column: 1 / 2;
grid-row: 2;
background-color: #f8f9fa;
border-top: 1px solid #a2a9b1;
border-right: 1px solid #a2a9b1;
border-left: 1px solid #a2a9b1;
}
.spgrid tr > td:nth-child(4) {
padding-top: 15px;
grid-column: 2 / 3;
grid-row: 2;
background-color: #f8f9fa;
border-top: 1px solid #a2a9b1;
border-right: 1px solid #a2a9b1;
}
.spgrid tr:last-child > td:nth-child(3) {
padding: 15px;
grid-column: 1 / 2;
grid-row: 2;
background-color: #f8f9fa;
border-top: 1px solid #a2a9b1;
border-right: 1px solid #a2a9b1;
border-bottom: 1px solid #a2a9b1;
border-left: 1px solid #a2a9b1;
}
.spgrid tr:last-child > td:nth-child(4) {
padding: 15px;
grid-column: 2 / 3;
grid-row: 2;
background-color: #f8f9fa;
border-top: 1px solid #a2a9b1;
border-bottom: 1px solid #a2a9b1;
border-right: 1px solid #a2a9b1;
}
/*** Ende Formatierungen Standard ***/
/*** Formatierungen für Breakpoint xs ***/
@media (max-width:576px) {
table { border: 0; }
.spgrid tr > td:nth-child(1) {
padding: 15px;
grid-column: 1 / 3;
grid-row: 1;
background-color: #eaecf0;
border: 1px solid #a2a9b1;
border-bottom: 0;
margin-top: 5px;
}
.spgrid tr > td:nth-child(2) {
padding: 15px;
grid-column: 1 / 3;
grid-row: 3;
background-color: #eaecf0;
border: 1px solid #a2a9b1;
border-bottom: 0;
margin-top: 5px;
}
.spgrid tr > td:nth-child(3), .spgrid tr:last-child > td:nth-child(3) {
padding-top: 15px;
grid-column: 1 / 3;
grid-row: 2;
background-color: #f8f9fa;
border: 1px solid #a2a9b1;
}
.spgrid tr > td:nth-child(4), .spgrid tr:last-child > td:nth-child(4) {
padding-top: 15px;
grid-column: 1 / 3;
grid-row: 4;
background-color: #f8f9fa;
border: 1px solid #a2a9b1;
}
.spgrid .frei {
display: none;
}
} /*** Ende Formatierungen für Breakpoint xs ***/