From Wikipedia, the free encyclopedia

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

	}

}