add sticky header to other tables

ui/blocks/BlocksTable.tsx

-import { Table, Thead, Tbody, Tr, Th } from '@chakra-ui/react';
+import { Table, Tbody, Tr, Th } from '@chakra-ui/react';
 import { AnimatePresence } from 'framer-motion';
 import capitalize from 'lodash/capitalize';
 import React from 'react';
@@ -8,6 +8,7 @@ import type { Block } from 'types/api/block';
 import appConfig from 'configs/app/config';
 import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
 import BlocksTableItem from 'ui/blocks/BlocksTableItem';
+import { default as Thead } from 'ui/shared/TheadSticky';
 
 interface Props {
   data: Array<Block>;
@@ -17,7 +18,7 @@ const BlocksTable = ({ data }: Props) => {
 
   return (
     <Table variant="simple" minWidth="1040px" size="md" fontWeight={ 500 } mt={ 8 }>
-      <Thead>
+      <Thead top={ 0 }>
         <Tr>
           <Th width="125px">Block</Th>
           <Th width="120px">Size</Th>

ui/shared/TheadSticky.tsx

@@ -36,6 +36,7 @@ const TheadSticky = ({ top, children, ...restProps }: Props) => {
     top: `${ top }px` || 0,
     backgroundColor: useColorModeValue('white', 'black'),
     boxShadow: isSticky ? 'md' : 'none',
+    zIndex: 1,
   };
 
   return (

ui/tx/internals/TxInternalsTable.tsx

-import { Table, Thead, Tbody, Tr, Th, Link, Icon } from '@chakra-ui/react';
+import { Table, Tbody, Tr, Th, Link, Icon } from '@chakra-ui/react';
 import React from 'react';
 
 import type { InternalTransaction } from 'types/api/internalTransaction';
 
 import appConfig from 'configs/app/config';
 import arrowIcon from 'icons/arrows/east.svg';
+import { default as Thead } from 'ui/shared/TheadSticky';
 import TxInternalsTableItem from 'ui/tx/internals/TxInternalsTableItem';
 import type { Sort, SortField } from 'ui/tx/internals/utils';
 
@@ -19,7 +20,7 @@ const TxInternalsTable = ({ data, sort, onSortToggle }: Props) => {
 
   return (
     <Table variant="simple" size="sm" mt={ 6 }>
-      <Thead>
+      <Thead top={ 0 }>
         <Tr>
           <Th width="28%">Type</Th>
           <Th width="20%">From</Th>

ui/tx/state/TxStateTable.tsx

 import {
   Table,
-  Thead,
   Tbody,
   Tr,
   Th,
@@ -11,12 +10,13 @@ import React from 'react';
 import appConfig from 'configs/app/config';
 import { data } from 'data/txState';
 import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
+import { default as Thead } from 'ui/shared/TheadSticky';
 import TxStateTableItem from 'ui/tx/state/TxStateTableItem';
 
 const TxStateTable = () => {
   return (
     <Table variant="simple" minWidth="950px" size="sm" w="auto" mt={ 6 }>
-      <Thead>
+      <Thead top={ 0 }>
         <Tr>
           <Th width="92px">Storage</Th>
           <Th width="146px">Address</Th>