JSFiddle - React, Tailwind, and code Playground

HTML

<body>
		<div class="tb">
			<table>
				<thead/>
				<tbody>
					<tr class="ban"><td>Barfoo</td><td>Bar</td><td>Blah</td><td>Foobar</td><td>FooBlah</td><td>BlahBar</td><td>Foo</td></tr>
					<tr class="ann"><td>ann</td><td>13</td><td>9</td><td class="ref">13</td><td>12</td><td>9</td><td>15</td></tr>
					<tr class="nbr"><td>nbr</td><td>-34</td><td>20</td><td class="ref">15</td><td>18</td><td>123</td><td>12</td></tr>
					<tr class="txb"><td>txb</td><td>2,83%</td><td>3,38%</td><td class"ref">3,84%</td><td>3,21%</td><td>3,52%</td><td>3,27%</td></tr>
				</tbody>
			</table>
		</div>
</body>

CSS

/* Default reset style sheet */
* {
	margin:0;
	padding:0;
	position: relative;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

.tb {
	font-family: Ubuntu;
	font-size: small;
	text-align: right;
}

div.tb tr td {
	padding: 0px 2px 0px 2px;
}

div.tb tr td {
	padding: 0px 2px 0px 2px;
}

div.tb tr td:not(:first-child) {
	width: 92px;
}

div.tb tr td:first-child {
	border-right: 1px solid black;
}

div.tb tr:not(:first-child) td:not(:first-child):not(.ref) {
	border-right: 1px solid #b0b0b0;
}

div.tb tr td.ref { /* FIXME */
	border-left: 2px solid black;
	border-right: 2px solid black;
}

div.tb tr.ann {
	background: #99CCFF;
	font-size: large;
	font-weight: bold;
	text-align: center;
	border-bottom: 1px solid black;
}

div.tb tr.ann td {
	height: 2.5em;
	font-size: 1em;
	font-weight: bold;
	text-align: center;
	border-bottom: 1px solid black;
}

div.tb tr.ann td:first-child {
	background: White;
	font-size: small;
	font-weight: bold;
	text-align: right;
}

div.tb tr.ann td.ref {
	background: Green;
	color: White;
}

div.tb tr.ann td.hover { /* FIXME */
	background: #069D81;
	border-left: 2px dotted #069D81;
	border-right: 2px dotted #069D81;
}

div.tb tr.txb {
	background: #99CCFF;
	font-weight: bold;
}