Put the docs class reference table in the .docs-table box (main) (#3144)

.changeset/docs-class-reference-table.md

@@ -0,0 +1,5 @@
+---
+"@tabler/docs": patch
+---
+
+Updated the class reference table in the docs to use the bordered `.docs-table` box.

docs/components/DocsClassnames.astro

@@ -46,26 +46,28 @@ const groups = Object.entries(classnames).sort(([a], [b]) => (groupOrder.indexOf
 
 <p>Every class this component ships, grouped by what it changes. A name in braces stands for a family — <code>{'{color}'}</code> is any base color, <code>{'{breakpoint}'}</code> any responsive step.</p>
 
-<table class="docs-classnames">
+<div class="docs-table">
-  <tbody>
+  <table class="docs-classnames">
-    {
+    <tbody>
-      groups.map(([group, entries]) =>
+      {
-        entries.map((entry) => (
+        groups.map(([group, entries]) =>
-          <tr>
+          entries.map((entry) => (
-            <td>
+            <tr>
-              <code>{entry.class}</code>
+              <td>
-            </td>
+                <code>{entry.class}</code>
-            <td>
+              </td>
-              <Badge color={groupColors[group] ?? 'secondary'} light icon={groupIcons[group] ?? 'tag'} text={group} class="text-capitalize" />
+              <td>
-            </td>
+                <Badge color={groupColors[group] ?? 'secondary'} light icon={groupIcons[group] ?? 'tag'} text={group} class="text-capitalize" />
-            <td>
+              </td>
-              {entry.desc}
+              <td>
-              {entry.default && <Badge color="blue" light text="default" class="ms-2" />}
+                {entry.desc}
-            </td>
+                {entry.default && <Badge color="blue" light text="default" class="ms-2" />}
-          </tr>
+              </td>
-        )),
+            </tr>
-      )
+          )),
-    }
+        )
-  </tbody>
+      }
-</table>
+    </tbody>
+  </table>
+</div>
 <!-- END DOCS CLASSNAMES -->

docs/scss/docs.scss

@@ -366,7 +366,9 @@ header > .navbar {
       border-inline-end: 0;
     }
 
-    thead tr:first-child > * {
+    // First row of the table, whether it sits in a thead or, as in the
+    // class reference, straight in the tbody.
+    > table > :first-child > tr:first-child > * {
       border-top: 0;
     }