HTML table mit border-radius und border-collapse

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.

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.

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
}

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.

.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>