Editing Module:Charmap/sandbox/styles.css

table.template-charmap tr:first-child {
	height: 50px; /* this is magic from StackOverflow to make the height below work */
}
table.template-charmap tr:first-child th[colspan] {
	height: 100%;
}
/* The most specific possible descendant selectors are used as any HTML might
   end up in the preview cell */
table.template-charmap tr:first-child th[colspan] > div {
	height: 100%;
	display: flex;
	justify-content: center;
}
table.template-charmap tr:first-child th[colspan] > div > div {
	display: flex;
	flex-direction: column;
	padding: 0 0.5em;
}

table.template-charmap tr:first-child th[colspan] > div > div > span:nth-child(2) {
	/* It is possible that unusual font sizes will be set, so padding is in px and
	   line-height is set to one, so that there is no font-size dependant padding. */
	margin: auto;
	padding: 10px 0;
	font-size: 150%;
	line-height: 1;
}

table.template-charmap .smallcaps-cm {
	font-size: 85%;
}

table.template-charmap td:first-child {
	text-align: left;
}

/* Condense the Numeric Character references as they can be wider than the page */
table.template-charmap .template-charmap-numchr td:nth-child(n+2) {
	font-size: 90%;
	padding: 2px;
}