.video-game-titles {
width: 100%;
box-sizing: border-box;
}
.video-game-titles tr:not(:first-child) th {
width: 256px;
vertical-align: middle;
text-align: center;
background-color: transparent;
}
/*
These selectors would potentially break nested tables, but I can't come up
with any case where someone would do that in conjunction with this stylesheet.
*/
@media only screen and (max-width: 720px) {
/* On mobile, the table will be handled as something more responsive. */
.video-game-titles,
.video-game-titles thead,
.video-game-titles tbody,
.video-game-titles tr,
.video-game-titles th,
.video-game-titles td,
.video-game-titles tr:not(:first-child) th {
display: block;
width: auto;
}
/* With the cells vertically oriented, the table headers no longer apply. */
.video-game-titles tr:first-child th {
display:none;
}
/* No border on the table itself. */
.video-game-titles {
border: none;
}
/*
Make sure borders aren't double-thick. (This particular selector relies
on every row – not every TR, but every visual row – starting with a TH.)
*/
.video-game-titles td {
border-top: none;
}
/* Separate items. */
.video-game-titles tr:not(:nth-child(2)) th {
margin-top: 3px;
}
/* Remove a break that unnecessarily takes vertical space on mobile. */
.video-game-titles tr th:first-child br:first-of-type {
display: none;
}
}