Fix distortion due to table scrollbar

app/client/src/components/designSystems/appsmith/Table.tsx

@@ -151,7 +151,11 @@ export const Table = (props: TableProps) => {
       />
       <div className={props.isLoading ? Classes.SKELETON : "tableWrap"}>
         <div {...getTableProps()} className="table">
-          <div onMouseOver={props.disableDrag} onMouseLeave={props.enableDrag}>
+          <div
+            onMouseOver={props.disableDrag}
+            onMouseLeave={props.enableDrag}
+            className="thead"
+          >
             {headerGroups.map((headerGroup: any, index: number) => (
               <div
                 {...headerGroup.getHeaderGroupProps()}

app/client/src/components/designSystems/appsmith/TableStyledWrappers.tsx

@@ -21,8 +21,7 @@ export const TableWrapper = styled.div<{
   .tableWrap {
     height: 100%;
     display: block;
-    overflow-x: auto;
-    overflow-y: hidden;
+    overflow: auto;
   }
   .table {
     border-spacing: 0;
@@ -36,13 +35,6 @@ export const TableWrapper = styled.div<{
       overflow: hidden;
     }
     .tbody {
-      overflow-y: scroll;
-      /* Subtracting 9px to handling widget padding */
-      height: ${props =>
-        props.height -
-        props.tableSizes.TABLE_HEADER_HEIGHT -
-        props.tableSizes.COLUMN_HEADER_HEIGHT -
-        9}px;
       .tr {
         width: 100%;
       }
@@ -104,6 +96,11 @@ export const TableWrapper = styled.div<{
       line-height: ${props => props.tableSizes.ROW_HEIGHT}px;
       padding: 0 10px;
     }
+    .thead {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
   }
   .draggable-header,
   .hidden-header {