Improve styling and mobile-friendliness

hersle · hersle · commit 50e7cdee1ee9 · 2025-08-23T20:54:11.000+02:00
diff --git a/index.html b/index.html
@@ -1,7 +1,8 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<meta charset="UTF-8">
+	<meta charset="UTF-8"/>
+	<meta name="viewport" content="width=device-width, initial-scale=1"/>
 	<title>Valg</title>
 	<link rel="stylesheet" href="style.css">
 	<script type="text/javascript" src="data2021.js"></script>
@@ -57,15 +58,19 @@ <h1>Valgsimulator</h1>
 		</span>
 	</fieldset>
 	<h2>Stemmefordeling</h2>
-	<table id="votes">
-		<thead></thead>
-		<tbody></tbody>
-	</table>
+	<div class="tablecontainer">
+		<table id="votes">
+			<thead></thead>
+			<tbody></tbody>
+		</table>
+	</div>
 	<h2>Mandatfordeling</h2>
-	<table id="seats">
-		<thead></thead>
-		<tbody></tbody>
-	</table>
+	<div class="tablecontainer">
+		<table id="seats">
+			<thead></thead>
+			<tbody></tbody>
+		</table>
+	</div>
 	<h2>Kilder</h2>
 	<ul>
 		<li><a href="https://valgresultat.no/valg/2021/">Offisielle stemmetall og valgresultater</a></li>
diff --git a/style.css b/style.css
@@ -2,6 +2,10 @@ body {
 	font-family: sans;
 }
 
+.tablecontainer {
+	overflow-x: auto;
+}
+
 table {
 	border-collapse: collapse;
 }
@@ -11,6 +15,7 @@ th, td {
 	padding: 0.25em;
 	text-align: right;
 	white-space: nowrap;
+	min-width: 2em;
 }
 
 th:first-child {
@@ -29,6 +34,7 @@ fieldset {
 	row-gap: 0.75em;
 	column-gap: 2em;
 }
+
 fieldset > p{
 	width: 100%;
 	margin: 0;
