KKeine Bearbeitungszusammenfassung |
KKeine Bearbeitungszusammenfassung |
||
(54 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
Zeile 12: | Zeile 12: | ||
.table-head { | .table-head { | ||
border: 2px solid | border: 2px solid green; | ||
background: lightgoldenrodyellow; | background: lightgoldenrodyellow; | ||
} | } | ||
. | .xtable { | ||
display: table; | display: table; | ||
border-spacing: 0.5em; | border-spacing: 0.5em; | ||
} | } | ||
. | .xtable-cell {display: table-cell; border: 1px solid grey;} | ||
.table-cell {display: table- | .xtable-row {display: table-row; border: 1px solid red;} | ||
.xtable-cell:first-child { | |||
display: block; | |||
width: 100%; | |||
} | |||
.spgridtr { | |||
background-color:white; | |||
color: #222; | |||
margin: 0em 0; | |||
border: 0; | |||
border-collapse: collapse; | |||
} | |||
.spgridtr th { | |||
background-color: #eaecf0; | |||
border: 1px solid #a2a9b1; | |||
} | |||
.spgridtr td { | |||
background-color: #f8f9fa; | |||
border: 1px solid #a2a9b1; | |||
padding: 0.2em 0.1em; | |||
line-height:1.4; | |||
} | |||
.spgridtr .Leerzeile { | |||
border-left: 0; | |||
border-right: 0; | |||
background: white; | |||
} | |||
/*** Formatierung Breakpoint sm ***/ | |||
@media (max-width: 576px) { | |||
.spgridtr { | |||
background-color:white; | |||
color: #222; | |||
margin: 0em 0; | |||
border: 0; | |||
width: 100%; | |||
} | |||
.spgridtr td { | |||
background-color: #f8f9fa; | |||
border: 1px solid #a2a9b1; | |||
padding: 0.2em 0.1em; | |||
line-height:1.4; | |||
} | |||
.spgridtr > * > tr > th { | |||
float: left; | |||
padding-left: 1px; | |||
padding-right: 0.4em; | |||
background-color: #eaecf0; | |||
border: 1px solid #a2a9b1; | |||
padding: 0.2em 0.1em; | |||
line-height:1.4; | |||
width: auto | |||
} | |||
.spgridtr { | |||
border-collapse: separate; | |||
border-spacing: 0.3em; | |||
} | |||
.spgridtr > * > tr > th:nth-child(1) { | |||
display: block; | |||
width:100%; | |||
text-align: left; | |||
padding-left: 1px; | |||
padding-right: 0.4em; | |||
color: green; | |||
} | |||
.spgridtr .Leerzeile { | |||
border-left: 0; | |||
border-right: 0; | |||
background: white; | |||
} | |||
.spgridtr tbody > tr { | |||
display: grid; | |||
grid-template-columns: 20% 40% 40%; | |||
width: 100%; | |||
color: red; | |||
} | |||
.spgridtr tbody > tr:first-child { | |||
display: table-row; | |||
width: 100%; | |||
color: red; | |||
} | |||
.spgridtr td:nth-child(1) { | |||
padding: 15px; | |||
grid-column: 1 / 4; | |||
grid-row: 1; | |||
background-color: #eaecf0; | |||
border: 1px solid #a2a9b1; | |||
margin-top: 5px; | |||
} | |||
.spgridtr tr > td:nth-child(2) { | |||
padding: 15px; | |||
grid-column: 1; | |||
grid-row: 2; | |||
background-color: #f8f9fa; | |||
border: 1px solid #a2a9b1; | |||
} | |||
.spgridtr tr > td:nth-child(3) { | |||
padding: 15px; | |||
grid-column: 2; | |||
grid-row: 2; | |||
background-color: #f8f9fa; | |||
border: 1px solid #a2a9b1; | |||
} | |||
.spgridtr tr > td:nth-child(4) { | |||
padding: 15px; | |||
grid-column: 3; | |||
grid-row: 2; | |||
background-color: #f8f9fa; | |||
border: 1px solid #a2a9b1; | |||
} | |||
} |
Aktuelle Version vom 10. Juli 2019, 14:28 Uhr
.wikitable3 > tbody > tr > td { float: left; text-align:left; padding-left: 2px; vertical-align: top; width: 33.3%; border-left: 1px solid #a2a9b1; /* Rand links zeichnen */ border-right: 1px solid #a2a9b1; /* Rand rechts zeichnen */ border-top: 1px solid #a2a9b1; /* Rand oben dünn zeichnen */ border-bottom: 1px solid #a2a9b1; /* Rand unten durch Hintergrundfarbe ausblenden */ } .table-head { border: 2px solid green; background: lightgoldenrodyellow; } .xtable { display: table; border-spacing: 0.5em; } .xtable-cell {display: table-cell; border: 1px solid grey;} .xtable-row {display: table-row; border: 1px solid red;} .xtable-cell:first-child { display: block; width: 100%; } .spgridtr { background-color:white; color: #222; margin: 0em 0; border: 0; border-collapse: collapse; } .spgridtr th { background-color: #eaecf0; border: 1px solid #a2a9b1; } .spgridtr td { background-color: #f8f9fa; border: 1px solid #a2a9b1; padding: 0.2em 0.1em; line-height:1.4; } .spgridtr .Leerzeile { border-left: 0; border-right: 0; background: white; } /*** Formatierung Breakpoint sm ***/ @media (max-width: 576px) { .spgridtr { background-color:white; color: #222; margin: 0em 0; border: 0; width: 100%; } .spgridtr td { background-color: #f8f9fa; border: 1px solid #a2a9b1; padding: 0.2em 0.1em; line-height:1.4; } .spgridtr > * > tr > th { float: left; padding-left: 1px; padding-right: 0.4em; background-color: #eaecf0; border: 1px solid #a2a9b1; padding: 0.2em 0.1em; line-height:1.4; width: auto } .spgridtr { border-collapse: separate; border-spacing: 0.3em; } .spgridtr > * > tr > th:nth-child(1) { display: block; width:100%; text-align: left; padding-left: 1px; padding-right: 0.4em; color: green; } .spgridtr .Leerzeile { border-left: 0; border-right: 0; background: white; } .spgridtr tbody > tr { display: grid; grid-template-columns: 20% 40% 40%; width: 100%; color: red; } .spgridtr tbody > tr:first-child { display: table-row; width: 100%; color: red; } .spgridtr td:nth-child(1) { padding: 15px; grid-column: 1 / 4; grid-row: 1; background-color: #eaecf0; border: 1px solid #a2a9b1; margin-top: 5px; } .spgridtr tr > td:nth-child(2) { padding: 15px; grid-column: 1; grid-row: 2; background-color: #f8f9fa; border: 1px solid #a2a9b1; } .spgridtr tr > td:nth-child(3) { padding: 15px; grid-column: 2; grid-row: 2; background-color: #f8f9fa; border: 1px solid #a2a9b1; } .spgridtr tr > td:nth-child(4) { padding: 15px; grid-column: 3; grid-row: 2; background-color: #f8f9fa; border: 1px solid #a2a9b1; } }