HTML table mit border-radius und border-collapse

Wenn die HTML-Tabelle bei border-radius partout keinen abgerundeten Rahmen zeigen will, ist wahrscheinlich border-collapse: collapse schuld.

border-radius in table mit border-collapse
BezeichnungWinterSommer
KleidungAnorakT-Shirt
SchuheStiefelSandalen
KopfschutzMützeStrohhut
table.jerky {
    border-radius: 10px;
    border: 1px solid gainsboro;
    border-collapse: collapse;
}

Mit border-collapse: separate funktioniert dann auch border-radius als Eigenschaft für das table-Tag.

BezeichnungWinterSommer
KleidungAnorakT-Shirt
SchuheStiefelSandalen
KopfschutzMützeStrohhut

Aber mit ohne border-collapse: collapse oder mit border-collapse:separate zeigen sich wieder die altertümlichen Doppellinien zwischen den Tabellenzellen.

table border-spacing

Denen tritt zwar das ebenso antike cellpadding-Attribut des table-Tags entgegen – aber das bedeutet, dass der HTML-Code für jedes table-Tag eingetragen werden muss. border-spacing: 0; legt die Linien für die einzelnen Tabellenzellen dann wenigstens nahtlos zusammen, jetzt aber sind es doppelte Linien, die einfach dicker aussehen.

BezeichnungWinterSommer
KleidungAnorakT-Shirt
SchuheStiefelSandalen
KopfschutzMützeStrohhut

Wenn die eine Hintergrundfarbe haben – etwa die Kopfzeilen – stechen die Zellen mit einer spitzen Ecke aus dem Rahmen.
first-child und last-child verhindern die doppelt dicken Rahmen von Tabellenzellen. Nicht das table-Tag bekommt den border-radius, sondern die Tabellenzellen. Das CSS für die Tabelle wird geschwätzig:

table.separate {  padding: 20px; border-radius: 10px; margin: 10px; border-spacing: 0; border-collapse: separate; }
table.separate td, table.separate th {  padding: 5px 12px; border-bottom: 1px solid green; border-right: 1px solid blue; }
table.separate th { background: blue; color: white; }
table.separate tr:last-child td:first-child {
    border-bottom-left-radius:10px;
}
table.separate tr:last-child td:last-child {
    border-bottom-right-radius:10px;
}
table.separate tr th:first-child,
table.separate tr td:first-child {
   border-left: 1px solid blue;
}
table.separate tr:first-child th,
table.separate tr:first-child td {
   border-top: 1px solid blue;
}
table.separate tr:first-child th:first-child,
table.separate tr:first-child td:first-child {
    border-top-left-radius:10px
}
table.separate tr:first-child th:last-child,
table.separate tr:first-child td:last-child {
    border-top-right-radius:10px
}
BezeichnungWinterSommer
KleidungAnorakT-Shirt
SchuheStiefelSandalen
KopfschutzMützeStrohhut

Na also.

Responsive Tabellen?

Es gibt keinen goldenen Weg und und keine umfassende Lösung, Tabellen responsive und barrierefrei zu gestalten. Bei sehr kleinen Tabellen lassen sich die Inhalte vielleicht quetschen, breitere Tabellen mit mehr als drei Spalten lassen sich auf kleinen Monitoren mit Hilfe von max-width und overflow: scroll scrollen. Einen Ausweg bietet display: flex.

Herge

Die Abenteuer von Tim und Struppi: Der Blaue Lotus
Tim und Struppi erleben gefährliche Abenteuer im Orient
 

Lewis Carrol

Alice im Wunderland
Obskure Abenteuer mit Kaninchen, Königin und Hutmacher
 

Terry Pratchett

Darwin und die Götter der Scheibenwelt
Evolutionsgeschichte entrückt und näher gebracht
 

Schuiten / Peeters

Der Turm
Die wahrhaftige Geschichte von dem Mann, der den Turm erkundete.
 

Richard Feyman

Lecture Notes Physics
Die Vorlesungsmitschriften, die Physik so leicht verständlich machen.
 
.flex {
   display:flex;
   flex-wrap:wrap;
   max-width: 300px;
   margin-left: auto;
   margin-right:auto;
}
.flex:nth-child(even) { background: hsl(200,30%,90%)}
.flex:nth-child(odd) { background: #efefef}
.row-cell { width: 300px; padding:5px; box-sizing: border-box}
.row-cell:nth-child(1) {order: 1; background: gray;  color: white; text-align: center}
.row-cell:nth-child(2) {order: 4}
.row-cell:nth-child(3) {order: 2}
.row-cell:nth-child(4) {order: 3}
@media (min-width: 640px) {
.flex {  max-width: 620px; }
.row-cell { width: 25%}
.row-cell:nth-child(1) {order: 1; text-align: left; background: gainsboro; color: gray;}
.row-cell:nth-child(2) {order: 2}
.row-cell:nth-child(3) {order: 3}
.row-cell:nth-child(4) {order: 4}
}

Das Markup ist einfacher als der HTML-Code von Tabellen.

<div class="flex">
   <div class="row-cell"><h3>Herge</h3></div>
   <div class="row-cell">Die Abenteuer von Tim und Struppi: Der Blaue Lotus</div>
   <div class="row-cell">Tim und Struppi erleben gefährliche Abenteuer im Orient</div>
   <div class="row-cell"><div class="bbox"></div></div>
</div>
2024-02-12 SITEMAP BLOG