theme: Fix overflow issue for wide tables

gohugoio · Mar 4, 2025 · 727ef6f · 727ef6f
1 parent c4f759e
commit 727ef6f
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 54 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -2,6 +2,7 @@
 **/icons.html
 # These are whitespace sensitive.
 layouts/_default/_markup/render-code*
+layouts/_default/_markup/render-table*
 
 # Odd template syntax.
 layouts/_default/_markup/render-heading*
@@ -12,4 +13,3 @@ layouts/partials/layouts/head/head.html
 # Auto generated.
 assets/css/components/chroma*.css
 assets/jsconfig.json
-
diff --git a/assets/css/components/content.css b/assets/css/components/content.css
@@ -30,7 +30,7 @@
   @apply prose-code:px-0.5 prose-code:text-gray-500 prose-code:dark:text-gray-300 border-none;
   @apply prose-code:before:hidden prose-code:after:hidden prose-code:font-mono;
   /* tables */
-  @apply prose-table:border-2 prose-table:border-gray-100  prose-table:dark:border-gray-800 prose-table:relative prose-table:overflow-scroll prose-table:prose-th:font-bold prose-table:prose-th:bg-blue-500 dark:prose-table:prose-th:bg-blue-500/50 prose-table:prose-th:p-2 prose-table:prose-td:p-2 prose-table:prose-th:text-white;
+  @apply prose-table:w-auto prose-table:border-2 prose-table:border-gray-100 prose-table:dark:border-gray-800 prose-table:prose-th:font-bold prose-table:prose-th:bg-blue-500 dark:prose-table:prose-th:bg-blue-500/50 prose-table:prose-th:p-2 prose-table:prose-td:p-2 prose-table:prose-th:text-white;
   /* hr */
   @apply dark:prose-hr:border-slate-800;
 

diff --git a/layouts/_default/_markup/render-table.html b/layouts/_default/_markup/render-table.html
@@ -0,0 +1,31 @@
+<div class="overflow-x-auto">
+  <table
+    {{- range $k, $v := .Attributes }}
+      {{- if $v }}
+        {{- printf " %s=%q" $k $v | safeHTMLAttr }}
+      {{- end }}
+    {{- end }}>
+    <thead>
+      {{- range .THead }}
+        <tr>
+          {{- range . }}
+            <th {{- with .Alignment }} class="!text-{{ . }}"{{- end }}>
+              {{- .Text -}}
+            </th>
+          {{- end }}
+        </tr>
+      {{- end }}
+    </thead>
+    <tbody>
+      {{- range .TBody }}
+        <tr>
+          {{- range . }}
+            <td {{- with .Alignment }} class="!text-{{ . }}"{{- end }}>
+              {{- .Text -}}
+            </td>
+          {{- end }}
+        </tr>
+      {{- end }}
+    </tbody>
+  </table>
+</div>
diff --git a/layouts/shortcodes/datatable-filtered.html b/layouts/shortcodes/datatable-filtered.html
@@ -10,32 +10,38 @@
 {{ $list := where $list $filter1 $filter2 $filter3 }}
 
 
-<table class="table table-bordered">
-  <tr>
-    {{ range $fields }}
-      <th>{{ . }}</th>
-    {{ end }}
-  </tr>
-  {{ range $list }}
-    <tr>
-      {{ range $k, $v := . }}
-        {{ $.Scratch.Set $k $v }}
-      {{ end }}
-      {{ range $k, $v := $fields }}
-        <td>
-          {{ $tdContent := $.Scratch.Get . }}
-          {{ if eq $k 3 }}
-            {{ printf "%v" $tdContent |
-              strings.ReplaceRE `\[` "<ol><li>" |
-              strings.ReplaceRE `\s` "</li><li>" |
-              strings.ReplaceRE `\]` "</li></ol>" |
-              safeHTML
-            }}
-          {{ else }}
-            {{ $tdContent }}
+<div class="overflow-x-auto">
+  <table>
+    <thead>
+      <tr>
+        {{ range $fields }}
+          <th>{{ . }}</th>
+        {{ end }}
+      </tr>
+    </thead>
+    <tbody>
+      {{ range $list }}
+        <tr>
+          {{ range $k, $v := . }}
+            {{ $.Scratch.Set $k $v }}
+          {{ end }}
+          {{ range $k, $v := $fields }}
+            <td>
+              {{ $tdContent := $.Scratch.Get . }}
+              {{ if eq $k 3 }}
+                {{ printf "%v" $tdContent |
+                  strings.ReplaceRE `\[` "<ol><li>" |
+                  strings.ReplaceRE `\s` "</li><li>" |
+                  strings.ReplaceRE `\]` "</li></ol>" |
+                  safeHTML
+                }}
+              {{ else }}
+                {{ $tdContent }}
+              {{ end }}
+            </td>
           {{ end }}
-        </td>
+        </tr>
       {{ end }}
-    </tr>
-  {{ end }}
-</table>
+    </tbody>
+  </table>
+</div>
diff --git a/layouts/shortcodes/datatable.html b/layouts/shortcodes/datatable.html
@@ -4,30 +4,36 @@
 {{ $fields := after 2 .Params }}
 
 
-<table class="table table-bordered">
-  <tr>
-    {{ range $fields }}
-      {{ $s := . }}
-      {{ if eq $s "_key" }}
-        {{ $s = "Type" }}
-      {{ end }}
-      <th>{{ $s }}</th>
-    {{ end }}
-  </tr>
-  {{ range $k1, $v1 := $list }}
-    <tr>
-      {{ range $k2, $v2 := . }}
-        {{ $.Scratch.Set $k2 $v2 }}
-      {{ end }}
-      {{ range $fields }}
-        {{ $s := "" }}
-        {{ if eq . "_key" }}
-          {{ $s = $k1 }}
-        {{ else }}
-          {{ $s = $.Scratch.Get . }}
+<div class="overflow-x-auto">
+  <table>
+    <thead>
+      <tr>
+        {{ range $fields }}
+          {{ $s := . }}
+          {{ if eq $s "_key" }}
+            {{ $s = "Type" }}
+          {{ end }}
+          <th>{{ $s }}</th>
         {{ end }}
-        <td>{{ $s }}</td>
+      </tr>
+    </thead>
+    <tbody>
+      {{ range $k1, $v1 := $list }}
+        <tr>
+          {{ range $k2, $v2 := . }}
+            {{ $.Scratch.Set $k2 $v2 }}
+          {{ end }}
+          {{ range $fields }}
+            {{ $s := "" }}
+            {{ if eq . "_key" }}
+              {{ $s = $k1 }}
+            {{ else }}
+              {{ $s = $.Scratch.Get . }}
+            {{ end }}
+            <td>{{ $s }}</td>
+          {{ end }}
+        </tr>
       {{ end }}
-    </tr>
-  {{ end }}
-</table>
+    </tbody>
+  </table>
+</div>