Merge pull request #21097 from dvdksn/tbl-styles

hugo: update table styles

assets/css/typography.css

@@ -73,10 +73,5 @@
       @apply text-lg;
       line-height: 1.75;
     }
-    table {
-      display: block;
-      overflow-x: auto;
-      max-width: 100%;
-    }
   }
 }

hugo_stats.json

@@ -413,6 +413,7 @@
       "outline-none",
       "overflow-clip",
       "overflow-hidden",
+      "overflow-x-auto",
       "overflow-x-hidden",
       "overflow-y-auto",
       "p-1",

layouts/_default/_markup/render-table.html

@@ -0,0 +1,39 @@
+<div class="overflow-x-auto">
+  <table
+    {{- range $k, $v := .Attributes }}
+      {{- if $v }}
+        {{- printf " %s=%q" $k $v | safeHTMLAttr }}
+      {{- end }}
+    {{- end }}>
+    <thead class="bg-gray-light-100 dark:bg-gray-dark-200">
+      {{- range .THead }}
+        <tr>
+          {{- range . }}
+            <th class="p-2"
+              {{- with .Alignment }}
+                {{- printf " style=%q" (printf "text-align: %s" .) | safeHTMLAttr }}
+              {{- end -}}
+            >
+              {{- .Text -}}
+            </th>
+          {{- end }}
+        </tr>
+      {{- end }}
+    </thead>
+    <tbody>
+      {{- range .TBody }}
+        <tr>
+          {{- range . }}
+            <td class="p-2"
+              {{- with .Alignment }}
+                {{- printf " style=%q" (printf "text-align: %s" .) | safeHTMLAttr }}
+              {{- end -}}
+            >
+              {{- .Text -}}
+            </td>
+          {{- end }}
+        </tr>
+      {{- end }}
+    </tbody>
+  </table>
+</div>

layouts/_default/cli.html

@@ -11,6 +11,7 @@
     <article class="prose min-w-0 flex-[2_2_0%] max-w-4xl dark:prose-invert">
     {{ partial "breadcrumbs.html" . }}
     <h1 class="scroll-mt-36">{{ .Title }}</h1>
+    <div class="overflow-x-auto">
       <table>
         <tbody>
           {{ with $data.short }}
@@ -43,6 +44,7 @@
           {{ end }}
         </tbody>
       </table>
+    </div>
     {{ .Content }}
     {{ if $data.deprecated }}
       {{ markdownify `
@@ -96,17 +98,18 @@ can be removed entirely in a future release.
         {{ $heading := dict "level" 2 "text" "Options" }}
         {{ partialCached "heading.html" $heading "cli-options" }}
         {{ $.Scratch.Add "headings" $heading }}
+        <div class="overflow-x-auto">
           <table>
-          <thead>
+            <thead class="bg-gray-light-100 dark:bg-gray-dark-200">
               <tr>
-              <th>Option</th>
-              <th>Default</th>
-              <th>Description</th>
+                <th class="p-2">Option</th>
+                <th class="p-2">Default</th>
+                <th class="p-2">Description</th>
               </tr>
             </thead>
             <tbody>
               {{ range . }}
-              <tr>
+                <tr class="p-2">
                   {{ $short := .shorthand }}
                   {{ $long := .option }}
                   <td>
@@ -152,6 +155,7 @@ can be removed entirely in a future release.
               {{ end }}
             </tbody>
           </table>
+        </div>
       {{ end }}
     {{ end }}
     {{ with $data.examples }}

tailwind.config.js

@@ -39,7 +39,7 @@ module.exports = {
             "--tw-prose-invert-hr": theme("colors.divider.dark"),
             "--tw-prose-invert-captions": theme("colors.gray.dark.600"),
             "--tw-prose-invert-th-borders": theme("colors.gray.dark.200"),
-            "--tw-prose-invert-td-borders": theme("colors.gray.dark.200"),
+            "--tw-prose-invert-td-borders": theme("colors.gray.dark.300"),
           },
         },
       }),