Für diese 3spaltige Tabelle habe ich im u.s. HEAD-code die Gitterlinien der Tabelle herausgenommen...
table, td, tr, th {
border: none;
border-collapse: collapse;
text-align: justify;
}
...und im table-Feld und für Schriftfarbe einen Farbcode gesetzt,...
table {
width:100%;
background: #88aacc;
color: #ffffff;
}
padding auf 8px gesetzt, anstatt 1lem und alle weiteren padding Werte auf null gesetzt...
td, tr, th {
padding: 8px;
}
...und im tablehead Bereich eine Hintergrund- und Schriftfarbe gesetzt
th {
background: #6688aa;
font-weight: bold;
color: #ffffff;
}
...Und um die wrap Funktion (Tabelle wechselt auf vertikale Darstellung) zu unterdrücken den Wert von 700px auf 400px reduziert: @media screen and (max-width:400px).
_______________________________________________________________
Responsive Tables