diff --git a/src/components/common/table.css b/src/components/common/table.css
index a48d191..f4b70fa 100644
--- a/src/components/common/table.css
+++ b/src/components/common/table.css
@@ -7,6 +7,11 @@
 	margin: 0 auto;
 }
 
+.table-grid {
+    display: flex;
+    flex-flow: column;
+}
+
 .table + .table {
     margin-top: 10px;
 }
@@ -56,6 +61,10 @@
     border-radius: var(--border-radius);
 }
 
+.row-grid {
+    display: flex;
+}
+
 .row-grid.mergeAdjacent > .feature:not(.dontMerge),
 .row-grid.mergeAdjacent > .tooltip-container > .feature:not(.dontMerge) {
     margin-left: 0;
@@ -77,19 +86,19 @@
 }
 
 .table-grid > .row-grid.mergeAdjacent:last-child > .feature:not(.dontMerge):first-child {
-    border-radius: 0 0 0 var(--border-radius);
+    border-bottom-left-radius: var(--border-radius);
 }
 
 .table-grid > .row-grid.mergeAdjacent:first-child > .feature:not(.dontMerge):last-child {
-    border-radius: 0 var(--border-radius) 0 0;
+    border-top-right-radius: var(--border-radius);
 }
 
 .table-grid > .row-grid.mergeAdjacent:first-child > .feature:not(.dontMerge):first-child {
-    border-radius: var(--border-radius) 0 0 0;
+    border-top-left-radius: var(--border-radius);
 }
 
 .table-grid > .row-grid.mergeAdjacent:last-child > .feature:not(.dontMerge):last-child {
-    border-radius: 0 0 var(--border-radius) 0;
+    border-bottom-right-radius: var(--border-radius);
 }
 
 
diff --git a/src/util/vue.tsx b/src/util/vue.tsx
index 196e679..16cd8cb 100644
--- a/src/util/vue.tsx
+++ b/src/util/vue.tsx
@@ -1,7 +1,10 @@
+import "components/common/table.css";
 import Col from "components/layout/Column.vue";
 import Row from "components/layout/Row.vue";
+import themes from "data/themes";
 import type { CoercableComponent, GenericComponent, JSXFunction } from "features/feature";
 import { Component as ComponentKey, GatherProps, jsx, Visibility } from "features/feature";
+import settings from "game/settings";
 import type { ProcessedComputable } from "util/computed";
 import { DoNotCache } from "util/computed";
 import type { Component, ComputedRef, DefineComponent, PropType, Ref, ShallowRef } from "vue";
@@ -61,6 +64,23 @@ export function renderCol(...objects: (VueFeature | CoercableComponent)[]): JSX.
     return <Col>{objects.map(render)}</Col>;
 }
 
+export function renderGrid(...rows: (VueFeature | CoercableComponent)[][]): JSX.Element {
+    return (
+        <div class="table-grid">
+            {rows.map(row => (
+                <div
+                    class={{
+                        ["row-grid"]: true,
+                        ["mergeAdjacent"]: themes[settings.theme].mergeAdjacent
+                    }}
+                >
+                    {row.map(render)}
+                </div>
+            ))}
+        </div>
+    );
+}
+
 export function renderJSX(object: VueFeature | CoercableComponent): JSX.Element {
     if (isCoercableComponent(object)) {
         if (typeof object === "function") {
@@ -85,6 +105,23 @@ export function renderColJSX(...objects: (VueFeature | CoercableComponent)[]): J
     return <Col>{objects.map(renderJSX)}</Col>;
 }
 
+export function renderGridJSX(...rows: (VueFeature | CoercableComponent)[][]): JSX.Element {
+    return (
+        <div class="table-grid">
+            {rows.map(row => (
+                <div
+                    class={{
+                        ["row-grid"]: true,
+                        ["mergeAdjacent"]: themes[settings.theme].mergeAdjacent
+                    }}
+                >
+                    {row.map(renderJSX)}
+                </div>
+            ))}
+        </div>
+    );
+}
+
 export function joinJSX(objects: JSX.Element[], joiner: JSX.Element): JSX.Element {
     return objects.reduce((acc, curr) => (
         <>