diff --git a/assets/css/upcoming.css b/assets/css/upcoming.css
new file mode 100644
index 0000000..05b096d
--- /dev/null
+++ b/assets/css/upcoming.css
@@ -0,0 +1,36 @@
+/* The rows of the table are added by JavaScript and end up as direct children
+   of the table, so the table styling of the theme, which addresses tbody, does
+   not reach them. Separate the date from the name of the event ourselves, and
+   keep the date on one line, it is one piece of information and reads badly
+   broken after the weekday. */
+#upcoming td:first-child {
+  padding-inline-end: 1em;
+  white-space: nowrap;
+}
+
+/* The table stands in a prose column, which the theme limits to 65 characters
+   so that running text stays readable. A date and the name of an event next to
+   each other do not fit into that, so the names were wrapped over several
+   lines. Lift the limit off the column and put it back on everything in it
+   except the table, which leaves the table room to grow while the text around
+   it keeps its width. */
+section.prose:has(> #upcoming) {
+  max-width: none;
+}
+
+section.prose:has(> #upcoming) > :not(#upcoming) {
+  max-width: 65ch;
+  margin-inline: auto;
+}
+
+/* The theme lays a table out as a block, "table { display: block; overflow:
+   auto }", so that a wide one can be scrolled sideways. A block fills its
+   parent instead of shrinking to its content the way a table does, so across
+   the whole width of the page the entries would stay at its left edge.
+   fit-content asks for the width of the content, which the automatic margins
+   then centre, and it never exceeds the column, so a display too narrow for
+   the table still wraps the names instead of overflowing. */
+#upcoming {
+  width: fit-content;
+  margin-inline: auto;
+}
diff --git a/layouts/shortcodes/upcoming.html b/layouts/shortcodes/upcoming.html
index 18173b3..d0cc46d 100644
--- a/layouts/shortcodes/upcoming.html
+++ b/layouts/shortcodes/upcoming.html
@@ -1,3 +1,5 @@
+{{- $css := resources.Get "css/upcoming.css" | minify | fingerprint -}}
 {{- $js := resources.Get "js/upcoming.js" | js.Build (dict "minify" true "format" "esm" "target" "es2020") | fingerprint -}}
+<link rel="stylesheet" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}">
 <table id="upcoming" class="table table-condensed"></table>
 <script type="module" src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}"></script>