Template:Video game titles/styles.css

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