From 9cdb051157e1644311cfc646f474929042b2a99c Mon Sep 17 00:00:00 2001
From: Kazhnuz <kazhnuz@kobold.cafe>
Date: Tue, 10 Sep 2024 23:39:47 +0200
Subject: [PATCH] feat: add table support

---
 index.html                  | 40 ++++++++++++++++++++++++++++++++++++-
 src/_typography.scss        |  3 ++-
 src/components/_tables.scss | 37 ++++++++++++++++++++++++++++++++++
 src/main.scss               |  3 ++-
 4 files changed, 80 insertions(+), 3 deletions(-)
 create mode 100644 src/components/_tables.scss

diff --git a/index.html b/index.html
index 99c859d..1ae9d43 100644
--- a/index.html
+++ b/index.html
@@ -83,7 +83,7 @@
     <form action="#">
         <input type="submit" value="Submit">
     </form>
-    <table border="1" cellspacing="0" cellpadding="5">
+    <table class="centered">
         <tr>
             <td>Row 1, Column 1</td>
             <td>Row 1, Column 2</td>
@@ -95,6 +95,44 @@
             <td>Row 2, Column 3</td>
         </tr>
     </table>
+    <table border="1" cellspacing="0" cellpadding="5">
+        <tr>
+            <th>Row 1, Column 1</th>
+            <th>Row 1, Column 2</th>
+            <th>Row 1, Column 3</th>
+        </tr>
+        <tr>
+            <td>Row 1, Column 1</td>
+            <td>Row 1, Column 2</td>
+            <td>Row 1, Column 3</td>
+        </tr>
+        <tr>
+            <td>Row 2, Column 1</td>
+            <td>Row 2, Column 2</td>
+            <td>Row 2, Column 3</td>
+        </tr>
+    </table>
+    <table>
+        <thead>
+            <tr>
+                <th>Row 1, Column 1</th>
+                <th>Row 1, Column 2</th>
+                <th>Row 1, Column 3</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>Row 1, Column 1</td>
+                <td>Row 1, Column 2</td>
+                <td>Row 1, Column 3</td>
+            </tr>
+            <tr>
+                <td>Row 2, Column 1</td>
+                <td>Row 2, Column 2</td>
+                <td>Row 2, Column 3</td>
+            </tr>
+        </tbody>
+    </table>
     <img src="https://via.placeholder.com/800x600/" alt="">
     <nav>
         <ul class="menu">
diff --git a/src/_typography.scss b/src/_typography.scss
index bf780fd..6f38181 100644
--- a/src/_typography.scss
+++ b/src/_typography.scss
@@ -6,7 +6,8 @@ h4,
 h5,
 h6,
 ul,
-ol {
+ol,
+table {
     padding: 0;
     margin: 0 0 1rem 0;
 }
diff --git a/src/components/_tables.scss b/src/components/_tables.scss
new file mode 100644
index 0000000..3fa0344
--- /dev/null
+++ b/src/components/_tables.scss
@@ -0,0 +1,37 @@
+table {
+  border-collapse: separate;
+  width:100%;
+  border:0;
+  border-spacing: 3px;
+}
+
+table.centered th, table.centered td {
+  text-align: center;
+}
+
+tr, th, td {
+  border:0;
+}
+
+th, td {
+  background-color: var(--color-background-alt);
+  padding:.33rem .66rem;
+}
+
+table:not(:has(thead)) tr:first-child, table > tr:first-child, table thead tr:first-child {
+  td:first-child, th:first-child {
+    border-top-left-radius: var(--well-radius);
+  }
+  td:last-child, th:last-child {
+    border-top-right-radius: var(--well-radius);
+  }
+}
+
+table > tr:last-child, table tbody tr:last-child {
+  td:first-child, th:first-child {
+    border-bottom-left-radius: var(--well-radius);
+  }
+  td:last-child, th:last-child {
+    border-bottom-right-radius: var(--well-radius);
+  }
+}
\ No newline at end of file
diff --git a/src/main.scss b/src/main.scss
index 6edafb6..1f55ce1 100644
--- a/src/main.scss
+++ b/src/main.scss
@@ -27,4 +27,5 @@
 @import 'components/cards';
 @import 'components/well';
 @import 'components/buttons';
-@import 'components/menus';
\ No newline at end of file
+@import 'components/menus';
+@import 'components/tables';
\ No newline at end of file