diff --git a/packages/canon/css/components.css b/packages/canon/css/components.css
index b5a81a9586..38a03e9dd1 100644
--- a/packages/canon/css/components.css
+++ b/packages/canon/css/components.css
@@ -103,7 +103,6 @@
 .canon-TablePagination {
   padding-top: var(--canon-space-3);
   border-top: 1px solid var(--canon-border);
-  margin-top: var(--canon-space-3);
   justify-content: space-between;
   align-items: center;
   display: flex;
@@ -203,56 +202,36 @@
   display: flex;
 }
 
-.table {
+.canon-TableRoot {
+  caption-side: bottom;
+  border-collapse: collapse;
   width: 100%;
-  position: relative;
-  overflow: auto;
-
-  & table {
-    caption-side: bottom;
-    width: 100%;
-    font-size: var(--canon-font-size-sm);
-    border-collapse: collapse;
-  }
 }
 
-.table-head {
+.canon-TableHead {
   text-align: left;
   padding: var(--canon-space-3);
+  font-size: var(--canon-font-size-3);
 }
 
-.table-body {
+.canon-TableBody {
   & tr:last-child {
     border-bottom: none;
   }
 }
 
-.table-row {
+.canon-TableRow {
+  border-bottom: 1px solid var(--canon-border);
   transition: color .2s ease-in-out;
-
-  &:hover td {
-    background-color: var(--canon-bg-tint);
-  }
-
-  & .table-cell:first-child {
-    border-top-left-radius: var(--canon-radius-2);
-    border-bottom-left-radius: var(--canon-radius-2);
-    box-shadow: inset 4px 2px 0 0 var(--canon-bg-surface-1), inset 4px -2px 0 0 var(--canon-bg-surface-1);
-    padding-left: var(--canon-space-3);
-  }
-
-  & .table-cell:last-child {
-    border-top-right-radius: var(--canon-radius-2);
-    border-bottom-right-radius: var(--canon-radius-2);
-    box-shadow: inset -4px 2px 0 0 var(--canon-bg-surface-1), inset -4px -2px 0 0 var(--canon-bg-surface-1);
-    padding-right: var(--canon-space-3);
-  }
 }
 
-.table-cell {
+.canon-TableBody .canon-TableRow:hover {
+  background-color: var(--canon-gray-2);
+}
+
+.canon-TableCell {
   padding: var(--canon-space-3);
-  background-color: var(--canon-bg);
-  box-shadow: inset 0px 2px 0 0 var(--canon-bg-surface-1), inset 0px -2px 0 0 var(--canon-bg-surface-1);
+  font-size: var(--canon-font-size-3);
 }
 
 .canon-Text {
diff --git a/packages/canon/css/datatable.css b/packages/canon/css/datatable.css
index c33ecce578..1773f6b980 100644
--- a/packages/canon/css/datatable.css
+++ b/packages/canon/css/datatable.css
@@ -1,7 +1,6 @@
 .canon-TablePagination {
   padding-top: var(--canon-space-3);
   border-top: 1px solid var(--canon-border);
-  margin-top: var(--canon-space-3);
   justify-content: space-between;
   align-items: center;
   display: flex;
diff --git a/packages/canon/css/styles.css b/packages/canon/css/styles.css
index 12097151da..57b4eb4d02 100644
--- a/packages/canon/css/styles.css
+++ b/packages/canon/css/styles.css
@@ -9327,7 +9327,6 @@
 .canon-TablePagination {
   padding-top: var(--canon-space-3);
   border-top: 1px solid var(--canon-border);
-  margin-top: var(--canon-space-3);
   justify-content: space-between;
   align-items: center;
   display: flex;
@@ -9427,56 +9426,36 @@
   display: flex;
 }
 
-.table {
+.canon-TableRoot {
+  caption-side: bottom;
+  border-collapse: collapse;
   width: 100%;
-  position: relative;
-  overflow: auto;
-
-  & table {
-    caption-side: bottom;
-    width: 100%;
-    font-size: var(--canon-font-size-sm);
-    border-collapse: collapse;
-  }
 }
 
-.table-head {
+.canon-TableHead {
   text-align: left;
   padding: var(--canon-space-3);
+  font-size: var(--canon-font-size-3);
 }
 
-.table-body {
+.canon-TableBody {
   & tr:last-child {
     border-bottom: none;
   }
 }
 
-.table-row {
+.canon-TableRow {
+  border-bottom: 1px solid var(--canon-border);
   transition: color .2s ease-in-out;
-
-  &:hover td {
-    background-color: var(--canon-bg-tint);
-  }
-
-  & .table-cell:first-child {
-    border-top-left-radius: var(--canon-radius-2);
-    border-bottom-left-radius: var(--canon-radius-2);
-    box-shadow: inset 4px 2px 0 0 var(--canon-bg-surface-1), inset 4px -2px 0 0 var(--canon-bg-surface-1);
-    padding-left: var(--canon-space-3);
-  }
-
-  & .table-cell:last-child {
-    border-top-right-radius: var(--canon-radius-2);
-    border-bottom-right-radius: var(--canon-radius-2);
-    box-shadow: inset -4px 2px 0 0 var(--canon-bg-surface-1), inset -4px -2px 0 0 var(--canon-bg-surface-1);
-    padding-right: var(--canon-space-3);
-  }
 }
 
-.table-cell {
+.canon-TableBody .canon-TableRow:hover {
+  background-color: var(--canon-gray-2);
+}
+
+.canon-TableCell {
   padding: var(--canon-space-3);
-  background-color: var(--canon-bg);
-  box-shadow: inset 0px 2px 0 0 var(--canon-bg-surface-1), inset 0px -2px 0 0 var(--canon-bg-surface-1);
+  font-size: var(--canon-font-size-3);
 }
 
 .canon-Text {
diff --git a/packages/canon/css/table.css b/packages/canon/css/table.css
index a146010779..dd25410a0e 100644
--- a/packages/canon/css/table.css
+++ b/packages/canon/css/table.css
@@ -1,51 +1,31 @@
-.table {
+.canon-TableRoot {
+  caption-side: bottom;
+  border-collapse: collapse;
   width: 100%;
-  position: relative;
-  overflow: auto;
-
-  & table {
-    caption-side: bottom;
-    width: 100%;
-    font-size: var(--canon-font-size-sm);
-    border-collapse: collapse;
-  }
 }
 
-.table-head {
+.canon-TableHead {
   text-align: left;
   padding: var(--canon-space-3);
+  font-size: var(--canon-font-size-3);
 }
 
-.table-body {
+.canon-TableBody {
   & tr:last-child {
     border-bottom: none;
   }
 }
 
-.table-row {
+.canon-TableRow {
+  border-bottom: 1px solid var(--canon-border);
   transition: color .2s ease-in-out;
-
-  &:hover td {
-    background-color: var(--canon-bg-tint);
-  }
-
-  & .table-cell:first-child {
-    border-top-left-radius: var(--canon-radius-2);
-    border-bottom-left-radius: var(--canon-radius-2);
-    box-shadow: inset 4px 2px 0 0 var(--canon-bg-surface-1), inset 4px -2px 0 0 var(--canon-bg-surface-1);
-    padding-left: var(--canon-space-3);
-  }
-
-  & .table-cell:last-child {
-    border-top-right-radius: var(--canon-radius-2);
-    border-bottom-right-radius: var(--canon-radius-2);
-    box-shadow: inset -4px 2px 0 0 var(--canon-bg-surface-1), inset -4px -2px 0 0 var(--canon-bg-surface-1);
-    padding-right: var(--canon-space-3);
-  }
 }
 
-.table-cell {
+.canon-TableBody .canon-TableRow:hover {
+  background-color: var(--canon-gray-2);
+}
+
+.canon-TableCell {
   padding: var(--canon-space-3);
-  background-color: var(--canon-bg);
-  box-shadow: inset 0px 2px 0 0 var(--canon-bg-surface-1), inset 0px -2px 0 0 var(--canon-bg-surface-1);
+  font-size: var(--canon-font-size-3);
 }