Code: Select all
/* tables */
table {
border-collapse: collapse;
}
td, th {
padding: 1em;
}
th:first-child {
padding-left: .5em;
}
th:last-child, td:last-child {
padding-right: .5em;
}
thead th {
border-bottom: 2px solid yellow;
}
tbody th {
font-weight: normal;
text-align: left;
}
th a {
padding: 15px 5px 15px 40px;
}
td {
text-align: center;
}
td a {
text-decoration: underline;
}
@media screen and (max-width: 42em) {
table, tbody, tr {
display: block;
}
thead {
display: none;
}
tr:first-child {
border-top: 2px solid yellow;
}
tr {
border-bottom: 2px solid yellow;
padding: .5em 2em 1em;
}
th::before { /* i don't need this one because thead isn't displayed, right? */
content: "Rang: ";
}
td:nth-child(1)::before {
font-weight: bold;
content: "Rang: ";
}
td:nth-child(3)::before {
font-weight: bold;
content: "Spiele: ";
}
td:nth-child(4)::before {
font-weight: bold;
content: "Siege: ";
}
td:nth-child(5)::before {
font-weight: bold;
content: "Unetschieden: ";
}
td:nth-child(6)::before {
font-weight: bold;
content: "Niederlagen: ";
}
td:nth-child(7)::before {
font-weight: bold;
content: "Tore: ";
}
td:nth-child(8)::before {
font-weight: bold;
content: "+/-: ";
}
td:nth-child(9)::before {
font-weight: bold;
content: "Punkte: ";
}
tbody th {
display: block;
font-weight: bold;
}
th a {
font-weight: normal;
}
td {
display: inline-block;
min-width: 30%;
padding: .2em 2em;
text-align: left;
}
td:nth-child(3) {
text-align: left;
}
}
@media screen and (max-width: 33em) {
td {
display: block;
}
tr {
padding: .5em .5em 1em;
}
} }
}
/edit: I've updated my actual css for tables