diff --git a/assets/style/_components.scss b/assets/style/_components.scss
index fd72758..56fc3e8 100644
--- a/assets/style/_components.scss
+++ b/assets/style/_components.scss
@@ -167,14 +167,21 @@ a.card:hover .card-meta { color: var(--color-primary-600); }
 /* =========================================================================
  * Tables
  * ========================================================================= */
+/* The render-table hook wraps every Markdown table in .table-wrap: wide
+ * tables scroll inside their own box on narrow screens instead of
+ * overflowing the page. Border + radius sit on the wrapper so the frame
+ * stays put while the table scrolls under it. */
+.prose .table-wrap {
+	margin-top: 1.4rem;
+	overflow-x: auto;
+	border: 1px solid var(--color-line);
+	border-radius: var(--radius-md);
+	-webkit-overflow-scrolling: touch;
+}
 .prose table {
 	width: 100%;
 	border-collapse: collapse;
-	margin-top: 1.4rem;
 	font-size: var(--font-size-300);
-	border: 1px solid var(--color-line);
-	border-radius: var(--radius-md);
-	overflow: hidden;
 }
 .prose thead { background: var(--color-base-soft); }
 .prose th {
diff --git a/layouts/_default/_markup/render-table.html b/layouts/_default/_markup/render-table.html
new file mode 100644
index 0000000..c0e4e78
--- /dev/null
+++ b/layouts/_default/_markup/render-table.html
@@ -0,0 +1,34 @@
+{{- /* Wrap every Markdown table in a horizontal scroll container so wide
+tables scroll within their own box on narrow screens instead of overflowing
+the page (the border + radius live on the wrapper — see _components.scss). */ -}}
+<div class="table-wrap">
+	<table
+		{{- range $k, $v := .Attributes }}
+		{{- if $v }}
+		{{- printf " %s=%q" $k $v | safeHTMLAttr }}
+		{{- end }}
+		{{- end }}>
+		<thead>
+			{{- range .THead }}
+			<tr>
+				{{- range . }}
+				<th {{- with .Alignment }} style="text-align: {{ . }}"{{ end }}>
+					{{- .Text -}}
+				</th>
+				{{- end }}
+			</tr>
+			{{- end }}
+		</thead>
+		<tbody>
+			{{- range .TBody }}
+			<tr>
+				{{- range . }}
+				<td {{- with .Alignment }} style="text-align: {{ . }}"{{ end }}>
+					{{- .Text -}}
+				</td>
+				{{- end }}
+			</tr>
+			{{- end }}
+		</tbody>
+	</table>
+</div>