diff --git a/docs/assets/_custom.scss b/docs/assets/_custom.scss
index e5618ea..ae4aa72 100644
--- a/docs/assets/_custom.scss
+++ b/docs/assets/_custom.scss
@@ -21,10 +21,12 @@ details {
   padding: 0rem 1rem !important;
   margin: 1rem;
   padding: 0 !important;
+  width: 100%;
 
   > summary {
     padding: 0rem !important;
     margin: 0 !important;
+    overflow-x: scroll;
 
     // do not show arrow bullet point
     list-style: none;
@@ -34,8 +36,6 @@ details {
 
     // replace builtin arrows with custom ones
     pre {
-      display: inline-block;
-      width: 100%;
       margin: 0 !important;
       padding-left: 42px !important;
       vertical-align: middle;
@@ -49,10 +49,18 @@ details {
       @include arrow(45deg);
   }
 
+  .table-container {
+    overflow-x: scroll !important;
+  }
+
+  table {
+    display: inline-table !important;
+    // TODO: no idea where this extra pixel comes from
+    width: calc(100% - 1px);
+  }
+
   table, tbody {
     // fill entire width
-    width: 100% !important;
-    display: table;
     margin: 0 !important;
 
     tr {
diff --git a/docs/layouts/partials/details.html b/docs/layouts/partials/details.html
index f249d1f..1345d56 100644
--- a/docs/layouts/partials/details.html
+++ b/docs/layouts/partials/details.html
@@ -9,32 +9,34 @@
         <pre>{{ $name }}</pre>
     </summary>
 
-    <table>
-        <tr>
-            <td>Description</td>
-            <td>{{ $option.description }}</td>
-        </tr>
+    <div class="table-container">
+        <table>
+            <tr>
+                <td>Description</td>
+                <td>{{ $option.description }}</td>
+            </tr>
 
-        <tr>
-            <td>Type</td>
-            <td><pre>{{ $option.type }}</pre></td>
-        </tr>
+            <tr>
+                <td>Type</td>
+                <td><pre>{{ $option.type }}</pre></td>
+            </tr>
 
-        <tr>
-            <td>Default</td>
-            <td>{{ partial "highlight" $option.default }}</td>
-        </tr>
+            <tr>
+                <td>Default</td>
+                <td>{{ partial "highlight" $option.default }}</td>
+            </tr>
 
-        {{ with $option.example }}
-        <tr>
-            <td>Example</td>
-            <td>{{ partial "highlight" . }}</td>
-        </tr>
-        {{ end }}
+            {{ with $option.example }}
+            <tr>
+                <td>Example</td>
+                <td>{{ partial "highlight" . }}</td>
+            </tr>
+            {{ end }}
 
-        <tr>
-            <td>Declared in</td>
-            <td><a href="{{ $repo }}/blob/main/{{ $path }}" target="_blank">{{ $path }}</a></td>
-        </tr>
-    </table>
+            <tr>
+                <td>Declared in</td>
+                <td><a href="{{ $repo }}/blob/main/{{ $path }}" target="_blank">{{ $path }}</a></td>
+            </tr>
+        </table>
+    </div>
 </details>
\ No newline at end of file