diff --git a/libs/web-components/src/assets/css/components.css b/libs/web-components/src/assets/css/components.css
index aa9baf219..c97234fe2 100644
--- a/libs/web-components/src/assets/css/components.css
+++ b/libs/web-components/src/assets/css/components.css
@@ -80,10 +80,6 @@ goa-table table {
   border-collapse: collapse;
 }
 
-goa-table.relaxed td {
-  padding: 1rem;
-}
-
 goa-table.sticky thead {
   position: sticky;
   top: 0;
@@ -95,6 +91,10 @@ goa-table td {
   border-bottom: 1px solid var(--goa-color-greyscale-200);
 }
 
+goa-table[variant=relaxed] td {
+  padding: 1.25rem 1rem 1rem 1rem;
+}
+
 goa-table thead th {
   background-color: var(--goa-color-greyscale-white);
   color: var(--goa-color-text-secondary);
diff --git a/libs/web-components/src/components/table/Table.svelte b/libs/web-components/src/components/table/Table.svelte
index 2f2186218..03270d87a 100644
--- a/libs/web-components/src/components/table/Table.svelte
+++ b/libs/web-components/src/components/table/Table.svelte
@@ -1,4 +1,9 @@
-<svelte:options customElement="goa-table" />
+<svelte:options customElement={{
+  tag: "goa-table",
+  props: {
+    variant: { reflect: true }
+  }
+}} />
 
 <script lang="ts">
   import { onMount, tick } from "svelte";
@@ -145,4 +150,4 @@
   table {
     border-collapse: collapse;
   }
-</style>
+</style>
\ No newline at end of file