Style tables

Author: SebKay

resources/css/app.css

@@ -11,6 +11,7 @@
 @import "./utilities.css";
 @import "./forms.css";
 @import "./buttons.css";
+@import "./tables.css";
 @import "./content.css";
 
 @layer base {

resources/css/content.css

@@ -48,10 +48,6 @@
         }
     }
 
-    .table-wrap {
-        @apply p-8 rounded-lg bg-white;
-    }
-
     table {
         @apply table;
     }

resources/css/tables.css

@@ -0,0 +1,34 @@
+@utility table {
+    @apply w-full text-left;
+
+    th,
+    td {
+        @apply border-b;
+    }
+
+    th:first-child,
+    td:first-child {
+        @apply pl-0;
+    }
+
+    th:last-child,
+    td:last-child {
+        @apply pr-0;
+    }
+
+    th {
+        @apply p-3 font-bold border-b-2 border-brand-950;
+    }
+
+    td {
+        @apply p-3 border-brand-950/15;
+    }
+}
+
+@utility table-wrap {
+    @apply w-full overflow-auto;
+
+    table {
+        @apply min-w-[500px];
+    }
+}

resources/js/Pages/Elements.vue

@@ -147,32 +147,34 @@
                             voluptates architecto laboriosam ipsum voluptatem ducimus.
                         </p>
                     </blockquote>
-                    <table>
-                        <thead>
-                            <tr>
-                                <th>Table Heading 1</th>
-                                <th>Table Heading 2</th>
-                                <th>Table Heading 3</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>Table Data 1</td>
-                                <td>Table Data 2</td>
-                                <td>Table Data 3</td>
-                            </tr>
-                            <tr>
-                                <td>Table Data 1</td>
-                                <td>Table Data 2</td>
-                                <td>Table Data 3</td>
-                            </tr>
-                            <tr>
-                                <td>Table Data 1</td>
-                                <td>Table Data 2</td>
-                                <td>Table Data 3</td>
-                            </tr>
-                        </tbody>
-                    </table>
+                    <div class="table-wrap">
+                        <table>
+                            <thead>
+                                <tr>
+                                    <th>Table Heading 1</th>
+                                    <th>Table Heading 2</th>
+                                    <th>Table Heading 3</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>Table Data 1</td>
+                                    <td>Table Data 2</td>
+                                    <td>Table Data 3</td>
+                                </tr>
+                                <tr>
+                                    <td>Table Data 1</td>
+                                    <td>Table Data 2</td>
+                                    <td>Table Data 3</td>
+                                </tr>
+                                <tr>
+                                    <td>Table Data 1</td>
+                                    <td>Table Data 2</td>
+                                    <td>Table Data 3</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
                 </div>
             </div>
         </div>