Make table responsive and vertically and horizontally scrollable

packages/standard-components/src/table/Table.svelte

@@ -8,6 +8,7 @@
   export let dataProvider
   export let columns
   export let showAutoColumns
+  export let rowCount = 8
 
   const component = getContext("component")
   const { styleable } = getContext("sdk")
@@ -60,11 +61,12 @@
   }
 </script>
 
-<div
+<div use:styleable={$component.styles}>
+  <div
     lang="en"
     dir="ltr"
-  use:styleable={$component.styles}
+    class={`spectrum ${size || 'spectrum--medium'} ${theme || 'spectrum--light'}`}
-  class={`spectrum ${size || 'spectrum--medium'} ${theme || 'spectrum--light'}`}>
+    style={`height: ${rowCount * 55}px;`}>
     <table class="spectrum-Table">
       <thead class="spectrum-Table-head">
         <tr>
@@ -102,9 +104,28 @@
         {/each}
       </tbody>
     </table>
+  </div>
 </div>
 
 <style>
+  .spectrum {
+    position: relative;
+    overflow: auto;
+  }
+  table {
+    width: 100%;
+  }
+  tbody {
+    z-index: 1;
+  }
+  th {
+    position: sticky;
+    top: 0;
+    background-color: var(--spectrum-global-color-gray-100);
+    border-bottom: 1px solid
+      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));
+    z-index: 2;
+  }
   .spectrum-Table-headCell-content {
     white-space: nowrap;
     display: flex;
@@ -116,6 +137,9 @@
   .spectrum-Table-cell {
     padding-top: 0;
     padding-bottom: 0;
+    border-bottom: 1px solid
+      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));
+    border-top: none !important;
   }
   .spectrum-Table-cell-content {
     height: 55px;