diff --git a/packages/react-docs/pages/components/table.mdx b/packages/react-docs/pages/components/table.mdx
index 4f44a41af5..30b7d300e4 100644
--- a/packages/react-docs/pages/components/table.mdx
+++ b/packages/react-docs/pages/components/table.mdx
@@ -41,6 +41,8 @@ render(() => {
   };
   const [variant, changeVariantBy] = useSelection('default');
   const [size, changeSizeBy] = useSelection('md');
+  const [isTableHeaderVisible, toggleIsTableHeaderVisible] = useToggle(true);
+  const [isTableBodyVisible, toggleIsTableBodyVisible] = useToggle(true);
   const data = React.useMemo(() => [
     { id: 1, eventType: 'Virus/Malware', affectedDevices: 20, detections: 634 },
     { id: 2, eventType: 'Spyware/Grayware', affectedDevices: 20, detections: 778 },
@@ -110,24 +112,51 @@ render(() => {
         </ButtonGroup>
       </FormGroup>
       <Divider mb="4x" />
+      <Box mb="4x">
+        <Text fontSize="lg" lineHeight="lg">
+          Table composition
+        </Text>
+      </Box>
+      <FormGroup>
+        <TextLabel display="flex" alignItems="center">
+          <Checkbox checked={isTableHeaderVisible} onChange={() => toggleIsTableHeaderVisible()} />
+          <Space width="2x" />
+          <Text fontFamily="mono" whiteSpace="nowrap">TableHeader</Text>
+        </TextLabel>
+      </FormGroup>
+      <FormGroup>
+        <TextLabel display="flex" alignItems="center">
+          <Checkbox checked={isTableBodyVisible} onChange={() => toggleIsTableBodyVisible()} />
+          <Space width="2x" />
+          <Text fontFamily="mono" whiteSpace="nowrap">TableBody</Text>
+        </TextLabel>
+      </FormGroup>
+      <Divider mb="4x" />
       <Flex alignItems="center" columnGap="3x" minHeight="5x">
-        <Table variant={variant} size={size}>
-          <TableHeader>
-            <TableHeaderRow>
-              <TableHeaderCell width="240px">Event Type</TableHeaderCell>
-              <TableHeaderCell textAlign="right">Affected Devices</TableHeaderCell>
-              <TableHeaderCell textAlign="right">Detections</TableHeaderCell>
-            </TableHeaderRow>
-          </TableHeader>
-          <TableBody>
-            {data.map(row => (
-              <TableRow key={row.id} {...tableRowProps}>
-                <TableCell width="240px">{row.eventType}</TableCell>
-                <TableCell textAlign="right">{row.affectedDevices}</TableCell>
-                <TableCell textAlign="right">{row.detections}</TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
+        <Table
+          variant={variant}
+          size={size}
+        >
+          {isTableHeaderVisible && (
+            <TableHeader>
+              <TableHeaderRow>
+                <TableHeaderCell width="240px">Event Type</TableHeaderCell>
+                <TableHeaderCell textAlign="right">Affected Devices</TableHeaderCell>
+                <TableHeaderCell textAlign="right">Detections</TableHeaderCell>
+              </TableHeaderRow>
+            </TableHeader>
+          )}
+          {isTableBodyVisible && (
+            <TableBody>
+              {data.map(row => (
+                <TableRow key={row.id} {...tableRowProps}>
+                  <TableCell width="240px">{row.eventType}</TableCell>
+                  <TableCell textAlign="right">{row.affectedDevices}</TableCell>
+                  <TableCell textAlign="right">{row.detections}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          )}
         </Table>
       </Flex>
     </>
diff --git a/packages/react/src/table/Table.js b/packages/react/src/table/Table.js
index 0541d6d4b1..cf05442dad 100644
--- a/packages/react/src/table/Table.js
+++ b/packages/react/src/table/Table.js
@@ -3,6 +3,7 @@ import { warnRemovedProps } from '@tonic-ui/utils';
 import memoize from 'micro-memoize';
 import React, { forwardRef } from 'react';
 import { Box } from '../box';
+import { defaultSize, defaultVariant } from './constants';
 import { TableContext } from './context';
 import { useTableStyle } from './styles';
 
@@ -11,9 +12,9 @@ const getMemoizedState = memoize(state => ({ ...state }));
 const Table = forwardRef((
   {
     isHoverable, // deprecated
-    children,
-    size = 'md',
-    variant = 'default',
+    role: roleProp,
+    size = defaultSize,
+    variant = defaultVariant,
     ...rest
   },
   ref,
@@ -29,22 +30,21 @@ const Table = forwardRef((
     }, (isHoverable !== undefined));
   }
 
-  const styleProps = useTableStyle({ variant });
+  const role = roleProp ?? 'table';
+  const styleProps = useTableStyle();
   const context = getMemoizedState({
-    variant,
     size,
+    variant,
   });
 
   return (
     <TableContext.Provider value={context}>
       <Box
         ref={ref}
-        role="table"
+        role={role}
         {...styleProps}
         {...rest}
-      >
-        {children}
-      </Box>
+      />
     </TableContext.Provider>
   );
 });
diff --git a/packages/react/src/table/TableBody.js b/packages/react/src/table/TableBody.js
index 43a3ab34fa..eb51854378 100644
--- a/packages/react/src/table/TableBody.js
+++ b/packages/react/src/table/TableBody.js
@@ -2,15 +2,23 @@ import React, { forwardRef } from 'react';
 import { Box } from '../box';
 import { useTableBodyStyle } from './styles';
 
-const TableBody = forwardRef((props, ref) => {
+const TableBody = forwardRef((
+  {
+    css: cssProp,
+    role: roleProp,
+    ...rest
+  },
+  ref,
+) => {
+  const role = roleProp ?? 'rowgroup';
   const styleProps = useTableBodyStyle();
 
   return (
     <Box
       ref={ref}
-      role="rowgroup"
+      role={role}
       {...styleProps}
-      {...props}
+      {...rest}
     />
   );
 });
diff --git a/packages/react/src/table/TableCell.js b/packages/react/src/table/TableCell.js
index 09e544782e..250bcfab68 100644
--- a/packages/react/src/table/TableCell.js
+++ b/packages/react/src/table/TableCell.js
@@ -1,34 +1,28 @@
 import React, { forwardRef } from 'react';
 import { Box } from '../box';
-import { useTableCellCSS, useTableCellStyle } from './styles';
+import { useTableCellStyle } from './styles';
 import useTable from './useTable';
 
 const TableCell = forwardRef((
   {
-    children,
-    css: cssProp,
     role: roleProp,
     width = 150,
     ...rest
   },
   ref,
 ) => {
-  const { size, variant } = useTable();
   const role = roleProp ?? 'cell';
-  const css = [useTableCellCSS({ role, variant }), cssProp];
-  const styleProps = useTableCellStyle({ size });
+  const { size, variant } = useTable();
+  const styleProps = useTableCellStyle({ size, variant });
 
   return (
     <Box
-      css={css}
       ref={ref}
       role={role}
       width={width}
       {...styleProps}
       {...rest}
-    >
-      {children}
-    </Box>
+    />
   );
 });
 
diff --git a/packages/react/src/table/TableHeader.js b/packages/react/src/table/TableHeader.js
index 7f14308eb6..322c1b9a4b 100644
--- a/packages/react/src/table/TableHeader.js
+++ b/packages/react/src/table/TableHeader.js
@@ -2,15 +2,22 @@ import React, { forwardRef } from 'react';
 import { Box } from '../box';
 import { useTableHeaderStyle } from './styles';
 
-const TableHeader = forwardRef((props, ref) => {
+const TableHeader = forwardRef((
+  {
+    role: roleProp,
+    ...rest
+  },
+  ref,
+) => {
+  const role = roleProp ?? 'rowgroup';
   const styleProps = useTableHeaderStyle();
 
   return (
     <Box
       ref={ref}
-      role="rowgroup"
+      role={role}
       {...styleProps}
-      {...props}
+      {...rest}
     />
   );
 });
diff --git a/packages/react/src/table/TableHeaderCell.js b/packages/react/src/table/TableHeaderCell.js
index 89484caf6f..c0219b182c 100644
--- a/packages/react/src/table/TableHeaderCell.js
+++ b/packages/react/src/table/TableHeaderCell.js
@@ -1,34 +1,28 @@
 import React, { forwardRef } from 'react';
 import { Box } from '../box';
-import { useTableHeaderCellCSS, useTableHeaderCellStyle } from './styles';
+import { useTableHeaderCellStyle } from './styles';
 import useTable from './useTable';
 
 const TableHeaderCell = forwardRef((
   {
-    children,
-    css: cssProp,
     role: roleProp,
     width = 150,
     ...rest
   },
   ref
 ) => {
-  const { size, variant } = useTable();
   const role = roleProp ?? 'columnheader';
-  const css = [useTableHeaderCellCSS({ role, variant }), cssProp];
-  const styleProps = useTableHeaderCellStyle({ size });
+  const { size, variant } = useTable();
+  const styleProps = useTableHeaderCellStyle({ size, variant });
 
   return (
     <Box
-      css={css}
       ref={ref}
       role={role}
       width={width}
       {...styleProps}
       {...rest}
-    >
-      {children}
-    </Box>
+    />
   );
 });
 
diff --git a/packages/react/src/table/TableHeaderRow.js b/packages/react/src/table/TableHeaderRow.js
index cbd0772f7d..1d7de41f90 100644
--- a/packages/react/src/table/TableHeaderRow.js
+++ b/packages/react/src/table/TableHeaderRow.js
@@ -2,15 +2,22 @@ import React, { forwardRef } from 'react';
 import { Box } from '../box';
 import { useTableHeaderRowStyle } from './styles';
 
-const TableHeaderRow = forwardRef((props, ref) => {
+const TableHeaderRow = forwardRef((
+  {
+    role: roleProp,
+    ...rest
+  },
+  ref,
+) => {
+  const role = roleProp ?? 'row';
   const styleProps = useTableHeaderRowStyle();
 
   return (
     <Box
       ref={ref}
-      role="row"
+      role={role}
       {...styleProps}
-      {...props}
+      {...rest}
     />
   );
 });
diff --git a/packages/react/src/table/TableRow.js b/packages/react/src/table/TableRow.js
index 8c4770b67e..7ff9be5372 100644
--- a/packages/react/src/table/TableRow.js
+++ b/packages/react/src/table/TableRow.js
@@ -1,18 +1,28 @@
 import React, { forwardRef } from 'react';
 import { Box } from '../box';
-import { useTableRowStyle } from './styles';
+import { useTableRowCSS, useTableRowStyle } from './styles';
 import useTable from './useTable';
 
-const TableRow = forwardRef((props, ref) => {
+const TableRow = forwardRef((
+  {
+    css: cssProp,
+    role: roleProp,
+    ...rest
+  },
+  ref,
+) => {
   const { variant } = useTable();
-  const styleProps = useTableRowStyle({ variant });
+  const role = roleProp ?? 'row';
+  const css = [useTableRowCSS({ role, variant }), cssProp];
+  const styleProps = useTableRowStyle();
 
   return (
     <Box
+      css={css}
       ref={ref}
-      role="row"
+      role={role}
       {...styleProps}
-      {...props}
+      {...rest}
     />
   );
 });
diff --git a/packages/react/src/table/constants.js b/packages/react/src/table/constants.js
new file mode 100644
index 0000000000..03498b4d62
--- /dev/null
+++ b/packages/react/src/table/constants.js
@@ -0,0 +1,2 @@
+export const defaultSize = 'md';
+export const defaultVariant = 'default';
diff --git a/packages/react/src/table/styles.js b/packages/react/src/table/styles.js
index b51048c291..91ab30d7f8 100644
--- a/packages/react/src/table/styles.js
+++ b/packages/react/src/table/styles.js
@@ -2,24 +2,10 @@ import { sx } from '@tonic-ui/styled-system';
 import { useColorMode } from '../color-mode';
 import { useTheme } from '../theme';
 
-const useTableStyle = ({ variant }) => {
-  const [colorMode] = useColorMode();
-  const borderColor = {
-    dark: 'gray:70',
-    light: 'gray:30',
-  }[colorMode];
-  const variantStyle = {
-    'outline': {
-      border: 1,
-      borderColor,
-    },
-  }[variant];
-
+const useTableStyle = () => {
   return {
-    display: 'inline-flex',
+    display: 'flex',
     flexDirection: 'column',
-    position: 'relative',
-    ...variantStyle,
   };
 };
 
@@ -30,108 +16,72 @@ const useTableHeaderStyle = () => {
   };
 };
 
-const useTableBodyStyle = () => {
-  return {
-  };
-};
-
 const useTableHeaderRowStyle = () => {
-  const [colorMode] = useColorMode();
-  const borderColor = {
-    dark: 'gray:70',
-    light: 'gray:30',
-  }[colorMode];
-
   return {
-    borderBottom: 2,
-    borderColor,
     display: 'flex',
   };
 };
 
-const useTableHeaderCellCSS = ({ role, variant }) => {
+const useTableHeaderCellStyle = ({ size, variant }) => {
+  const { sizes } = useTheme();
   const [colorMode] = useColorMode();
   const borderColor = {
     dark: 'gray:70',
     light: 'gray:30',
   }[colorMode];
-
-  if (variant === 'outline') {
-    const adjacentSiblingSelector = `[role="${role}"] + &[role="${role}"]`;
-    return sx({
-      [adjacentSiblingSelector]: {
-        borderLeft: 1,
-        borderColor,
-      },
-    });
-  }
-
-  return {};
-};
-
-const useTableHeaderCellStyle = ({ size }) => {
-  const { sizes } = useTheme();
-  const [colorMode] = useColorMode();
   const color = {
     dark: 'white:secondary',
     light: 'black:secondary',
   }[colorMode];
   const px = '3x';
-  const pt = {
+  const py = {
     'sm': '1x',
     'md': '2x',
     'lg': '3x',
   }[size];
-  const pb = {
-    'sm': `calc(${sizes['1x']} - ${sizes['2q']})`,
-    'md': `calc(${sizes['2x']} - ${sizes['2q']})`,
-    'lg': `calc(${sizes['3x']} - ${sizes['2q']})`,
-  }[size];
+
+  if (variant === 'outline') {
+    return {
+      borderTop: 1,
+      borderTopColor: borderColor,
+      borderBottom: 2,
+      borderBottomColor: borderColor,
+      borderLeft: 1,
+      borderLeftColor: borderColor,
+      color,
+      fontWeight: 'semibold',
+      px,
+      pt: `calc(${sizes[py]} - ${sizes['1q']})`,
+      pb: `calc(${sizes[py]} - ${sizes['2q']})`,
+      _lastChild: {
+        borderRight: 1,
+        borderRightColor: borderColor,
+      },
+    };
+  }
 
   return {
+    borderBottom: 2,
+    borderBottomColor: borderColor,
     color,
     fontWeight: 'semibold',
     px,
-    pt,
-    pb,
+    pt: py,
+    pb: `calc(${sizes[py]} - ${sizes['2q']})`,
   };
 };
 
-const useTableRowStyle = ({ variant }) => {
-  const [colorMode] = useColorMode();
-  const borderColor = {
-    dark: 'gray:70',
-    light: 'gray:30',
-  }[colorMode];
-  const variantStyle = {
-    'outline': {
-      _lastOfType: {
-        borderBottomColor: 'transparent',
-      },
-    },
-  }[variant];
-
+const useTableBodyStyle = () => {
   return {
-    borderBottom: 1,
-    borderColor,
-    display: 'flex',
-    ...variantStyle,
   };
 };
 
-const useTableCellCSS = ({ role, variant }) => {
-  const [colorMode] = useColorMode();
-  const borderColor = {
-    dark: 'gray:70',
-    light: 'gray:30',
-  }[colorMode];
-
+const useTableRowCSS = ({ role, variant }) => {
   if (variant === 'outline') {
-    const adjacentSiblingSelector = `[role="${role}"] + &[role="${role}"]`;
+    const selector = `[role=${role}] + &[role=${role}] > *`;
     return sx({
-      [adjacentSiblingSelector]: {
-        borderLeft: 1,
-        borderColor,
+      [selector]: {
+        borderTopColor: 'transparent',
       },
     });
   }
@@ -139,30 +89,54 @@ const useTableCellCSS = ({ role, variant }) => {
   return {};
 };
 
-const useTableCellStyle = ({ size }) => {
+const useTableRowStyle = () => {
+  return {
+    display: 'flex',
+  };
+};
+
+const useTableCellStyle = ({ size, variant }) => {
   const { sizes } = useTheme();
   const [colorMode] = useColorMode();
+  const borderColor = {
+    dark: 'gray:70',
+    light: 'gray:30',
+  }[colorMode];
   const color = {
     dark: 'white:primary',
     light: 'black:primary',
   }[colorMode];
   const px = '3x';
-  const pt = {
+  const py = {
     'sm': '1x',
     'md': '2x',
     'lg': '3x',
   }[size];
-  const pb = {
-    'sm': `calc(${sizes['1x']} - ${sizes['1q']})`,
-    'md': `calc(${sizes['2x']} - ${sizes['1q']})`,
-    'lg': `calc(${sizes['3x']} - ${sizes['1q']})`,
-  }[size];
+
+  if (variant === 'outline') {
+    return {
+      borderBottom: 1,
+      borderBottomColor: borderColor,
+      borderLeft: 1,
+      borderLeftColor: borderColor,
+      color,
+      px,
+      pt: py,
+      pb: `calc(${sizes[py]} - ${sizes['1q']})`,
+      _lastChild: {
+        borderRight: 1,
+        borderRightColor: borderColor,
+      },
+    };
+  }
 
   return {
+    borderBottom: 1,
+    borderBottomColor: borderColor,
     color,
     px,
-    pt,
-    pb,
+    pt: py,
+    pb: `calc(${sizes[py]} - ${sizes['1q']})`,
   };
 };
 
@@ -181,12 +155,11 @@ const useTableScrollbarTrackStyle = () => {
 export {
   useTableStyle,
   useTableHeaderStyle,
-  useTableBodyStyle,
   useTableHeaderRowStyle,
-  useTableHeaderCellCSS,
   useTableHeaderCellStyle,
-  useTableRowStyle,
-  useTableCellCSS,
+  useTableBodyStyle,
   useTableCellStyle,
+  useTableRowCSS,
+  useTableRowStyle,
   useTableScrollbarTrackStyle,
 };