<table>
	<caption>Monitoring Status</caption>
	<thead>
		<tr>
			<th>
				Site
			</th>
			<th>
				Site Connection
			</th>
			<th>
				Automatic Tank Gauge
			</th>
			<th>
				Emergency Stop
			</th>
			<th>
				Fire / Gas Detection
			</th>
			<th>
				Electricity
			</th>
			<th>
				Leak Detection
			</th>
			<th>
				SGB Leak Detection
			</th>
			<th>
				Pressurized Line Leak Detection
			</th>
			<th>
				Oil Water Separator
			</th>
			<th>
				Sewage Pump
			</th>
			<th>
				Cathodic Protection
			</th>
			<th>
				Temperature (°C)
			</th>
			<th>
				Price Sign
			</th>
			<th>
				CCTV
			</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Deinze</td>
			<td>🟢</td>
			<td>🔴</td>
			<td>🟢</td>
			<td>⚪️</td>
			<td>🟢</td>
			<td>⚪️</td>
			<td>⚪️</td>
			<td>🟢</td>
			<td>🟢</td>
			<td>🟢</td>
			<td>🟢</td>
			<td>🟢</td>
			<td>🟢</td>
			<td>🟢</td>
		</tr>
		<tr>
			<td>Ghent</td>
			<td>🟢</td>
			<td>🟢</td>
			<td>⚪️</td>
			<td>🟢</td>
			<td>⚪️</td>
			<td>🔴</td>
			<td>🟢</td>
			<td>⚪️</td>
			<td>🟢</td>
			<td>🟢</td>
			<td>🔴</td>
			<td>🟢</td>
			<td>🟢</td>
			<td>🟢</td>
		</tr>
		<tr>
			<td>Zulte</td>
			<td>🟢</td>
			<td>⚪️</td>
			<td>⚪️</td>
			<td>🟢</td>
			<td>⚪️</td>
			<td>🔴</td>
			<td>🟢</td>
			<td>⚪️</td>
			<td>🟢</td>
			<td>🔴</td>
			<td>🟢</td>
			<td>🟢</td>
			<td>⚪️</td>
			<td>🟢</td>
		</tr>
	</tbody>
</table>
<p><small><i>💡 Demo for <a href="https://brm.us/tablesng" target="_top">https://brm.us/tablesng</a></i></small></p>
thead th:not(:first-child) {
	writing-mode: vertical-lr; 	/* Switch to vertical writing mode, rendering the label text at 90 degrees */
	text-align: right; 			/* Align labels to visual bottom edge */
	padding-top: 1em; 			/* Add padding to visual top */
}

thead th:first-child {
	vertical-align: bottom;
}





caption {
	font-style: italic;
}

table, th, td {
	border: 1px solid #ccc;
}

thead th {
	background: #efefef;
	padding: 0.5em;
}

tbody tr td:first-child {
	min-width: 10em;
}

tbody tr td:not(:first-child) {
	text-align: center;
}


body {
	display: grid;
	place-items: center;
	align-content: start;
	min-height: 90vh;
	font-family: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.