fix: small change in the styling of tables

vycke · Sep 11, 2024 · 1bb0a16 · 1bb0a16
1 parent 07723bd
commit 1bb0a16
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 8 deletions.
diff --git a/feo.css b/feo.css
@@ -660,12 +660,15 @@
   table {
     --table-radius: 6px;
     --table-color: var(--surface-1);
-    border: 1px solid var(--table-color);
-    background: var(--table-color);
+    border-collapse: collapse;
     border-radius: calc(var(--table-radius) * 1.3);
     width: 100%;
   }
 
+  thead {
+    background: var(--table-color);
+  }
+
   table tr:last-child td:first-child {
     border-bottom-left-radius: var(--table-radius);
   }
@@ -691,6 +694,10 @@
     padding: 4px var(--token-size-000);
   }
 
+  tbody tr {
+    border-top: 1px solid var(--table-color);
+  }
+
   table tr:hover td {
     background-color: var(--table-color);
   }

diff --git a/feo.min.css b/feo.min.css
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     "build:11ty": "npx @11ty/eleventy && yarn css:docs"
   },
   "name": "feo-css",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "main": "feo.css",
   "description": "A tiny CSS framework",
   "repository": "https://github.com/vyckes/feo-css.git",

diff --git a/public/feo.min.css b/public/feo.min.css
diff --git a/src/blocks/table.css b/src/blocks/table.css
@@ -18,12 +18,14 @@ table {
 
   /* Table fills always the available space */
   width: 100%;
-  border: 1px solid var(--table-color);
-  /* the entire table gets the background, and cells get the site BG */
-  background: var(--table-color);
+  border-collapse: collapse;
   border-radius: calc(var(--table-radius) * 1.3);
 }
 
+thead {
+  background: var(--table-color);
+}
+
 table tr:last-child td:first-child {
   border-bottom-left-radius: var(--table-radius);
 }
@@ -50,6 +52,10 @@ th {
   padding: 4px var(--token-size-000);
 }
 
+tbody tr {
+  border-top: 1px solid var(--table-color);
+}
+
 table tr:hover td {
   background-color: var(--table-color);
 }