diff --git a/packages/react-table/src/demos/examples/TableCompact.tsx b/packages/react-table/src/demos/examples/TableCompact.tsx
index 6e7619aa3fa..835a8743a56 100644
--- a/packages/react-table/src/demos/examples/TableCompact.tsx
+++ b/packages/react-table/src/demos/examples/TableCompact.tsx
@@ -1,7 +1,6 @@
 import { Fragment, useState } from 'react';
 import {
   Button,
-  Card,
   MenuToggle,
   MenuToggleElement,
   Pagination,
@@ -130,45 +129,43 @@ export const TableCompact: React.FunctionComponent = () => {
     <Fragment>
       <DashboardWrapper hasPageTemplateTitle>
         <PageSection isFilled aria-label="Compact table data">
-          <Card>
-            {tableToolbar}
-            <Table variant="compact" aria-label="Compact Table">
-              <Thead>
-                <Tr>
-                  <Th key={0}>{columns[0]}</Th>
-                  <Th key={1}>{columns[1]}</Th>
-                  <Th key={2}>{columns[2]}</Th>
-                  <Th key={3}>{columns[3]}</Th>
-                  <Th key={4}>{columns[4]}</Th>
-                  <Th key={5}>{columns[5]}</Th>
-                  <Th key={6}>{columns[6]}</Th>
-                  <Th key={7} width={10}>
-                    {columns[7]}
-                  </Th>
+          {tableToolbar}
+          <Table variant="compact" aria-label="Compact Table">
+            <Thead>
+              <Tr>
+                <Th key={0}>{columns[0]}</Th>
+                <Th key={1}>{columns[1]}</Th>
+                <Th key={2}>{columns[2]}</Th>
+                <Th key={3}>{columns[3]}</Th>
+                <Th key={4}>{columns[4]}</Th>
+                <Th key={5}>{columns[5]}</Th>
+                <Th key={6}>{columns[6]}</Th>
+                <Th key={7} width={10}>
+                  {columns[7]}
+                </Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {paginatedRows.map((row, rowIndex) => (
+                <Tr key={rowIndex}>
+                  <>
+                    <Td dataLabel={columns[0]}>{row.name}</Td>
+                    <Td dataLabel={columns[1]}>{row.threads}</Td>
+                    <Td dataLabel={columns[2]}>{row.applications}</Td>
+                    <Td dataLabel={columns[3]}>{row.workspaces}</Td>
+                    <Td dataLabel={columns[4]}>{renderLabel(row.status)}</Td>
+                    <Td dataLabel={columns[5]}>{row.location}</Td>
+                    <Td dataLabel={columns[6]}>{row.lastModified}</Td>
+                    <Td dataLabel={columns[7]} modifier="truncate">
+                      <TableText>
+                        <a href="#">{row.url}</a>
+                      </TableText>
+                    </Td>
+                  </>
                 </Tr>
-              </Thead>
-              <Tbody>
-                {paginatedRows.map((row, rowIndex) => (
-                  <Tr key={rowIndex}>
-                    <>
-                      <Td dataLabel={columns[0]}>{row.name}</Td>
-                      <Td dataLabel={columns[1]}>{row.threads}</Td>
-                      <Td dataLabel={columns[2]}>{row.applications}</Td>
-                      <Td dataLabel={columns[3]}>{row.workspaces}</Td>
-                      <Td dataLabel={columns[4]}>{renderLabel(row.status)}</Td>
-                      <Td dataLabel={columns[5]}>{row.location}</Td>
-                      <Td dataLabel={columns[6]}>{row.lastModified}</Td>
-                      <Td dataLabel={columns[7]} modifier="truncate">
-                        <TableText>
-                          <a href="#">{row.url}</a>
-                        </TableText>
-                      </Td>
-                    </>
-                  </Tr>
-                ))}
-              </Tbody>
-            </Table>
-          </Card>
+              ))}
+            </Tbody>
+          </Table>
         </PageSection>
       </DashboardWrapper>
     </Fragment>
diff --git a/packages/react-table/src/demos/examples/TableEmptyStateDefault.tsx b/packages/react-table/src/demos/examples/TableEmptyStateDefault.tsx
index 967fd39a31d..8e6d772b8c7 100644
--- a/packages/react-table/src/demos/examples/TableEmptyStateDefault.tsx
+++ b/packages/react-table/src/demos/examples/TableEmptyStateDefault.tsx
@@ -2,7 +2,6 @@ import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import {
   Bullseye,
   Button,
-  Card,
   EmptyState,
   EmptyStateVariant,
   EmptyStateBody,
@@ -16,42 +15,40 @@ import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/Dashboa
 export const TableEmptyStateDefault: React.FunctionComponent = () => (
   <DashboardWrapper hasPageTemplateTitle>
     <PageSection padding={{ default: 'noPadding', xl: 'padding' }} aria-label="Empty state table data">
-      <Card component="div">
-        <Table aria-label="Empty state table">
-          <Thead>
-            <Tr>
-              <Th>Repositories</Th>
-              <Th>Branches</Th>
-              <Th>Pull requests</Th>
-              <Th>Workspaces</Th>
-              <Th>Last commit</Th>
-            </Tr>
-          </Thead>
-          <Tbody>
-            <Tr>
-              <Td colSpan={8}>
-                <Bullseye>
-                  <EmptyState
-                    titleText="No results found"
-                    icon={SearchIcon}
-                    headingLevel="h2"
-                    variant={EmptyStateVariant.sm}
-                  >
-                    <EmptyStateBody>
-                      No results match this filter criteria. Clear all filters and try again.
-                    </EmptyStateBody>
-                    <EmptyStateFooter>
-                      <EmptyStateActions>
-                        <Button variant="link">Clear all filters</Button>
-                      </EmptyStateActions>
-                    </EmptyStateFooter>
-                  </EmptyState>
-                </Bullseye>
-              </Td>
-            </Tr>
-          </Tbody>
-        </Table>
-      </Card>
+      <Table aria-label="Empty state table">
+        <Thead>
+          <Tr>
+            <Th>Repositories</Th>
+            <Th>Branches</Th>
+            <Th>Pull requests</Th>
+            <Th>Workspaces</Th>
+            <Th>Last commit</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          <Tr>
+            <Td colSpan={8}>
+              <Bullseye>
+                <EmptyState
+                  titleText="No results found"
+                  icon={SearchIcon}
+                  headingLevel="h2"
+                  variant={EmptyStateVariant.sm}
+                >
+                  <EmptyStateBody>
+                    No results match this filter criteria. Clear all filters and try again.
+                  </EmptyStateBody>
+                  <EmptyStateFooter>
+                    <EmptyStateActions>
+                      <Button variant="link">Clear all filters</Button>
+                    </EmptyStateActions>
+                  </EmptyStateFooter>
+                </EmptyState>
+              </Bullseye>
+            </Td>
+          </Tr>
+        </Tbody>
+      </Table>
     </PageSection>
   </DashboardWrapper>
 );
diff --git a/packages/react-table/src/demos/examples/TableEmptyStateError.tsx b/packages/react-table/src/demos/examples/TableEmptyStateError.tsx
index 9caf9f1478c..ff604e9794f 100644
--- a/packages/react-table/src/demos/examples/TableEmptyStateError.tsx
+++ b/packages/react-table/src/demos/examples/TableEmptyStateError.tsx
@@ -1,42 +1,40 @@
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
-import { Bullseye, Card, EmptyState, EmptyStateVariant, EmptyStateBody, PageSection } from '@patternfly/react-core';
+import { Bullseye, EmptyState, EmptyStateVariant, EmptyStateBody, PageSection } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 
 export const TableEmptyStateError: React.FunctionComponent = () => (
   <DashboardWrapper hasPageTemplateTitle>
     <PageSection padding={{ default: 'noPadding', xl: 'padding' }} aria-label="Empty state table with error">
-      <Card component="div">
-        <Table aria-label="Loading table demo">
-          <Thead>
-            <Tr>
-              <Th>Repositories</Th>
-              <Th>Branches</Th>
-              <Th>Pull requests</Th>
-              <Th>Workspaces</Th>
-              <Th>Last commit</Th>
-            </Tr>
-          </Thead>
-          <Tbody>
-            <Tr>
-              <Td colSpan={8}>
-                <Bullseye>
-                  <EmptyState
-                    icon={ExclamationCircleIcon}
-                    titleText="Unable to connect"
-                    headingLevel="h2"
-                    variant={EmptyStateVariant.sm}
-                  >
-                    <EmptyStateBody>
-                      There was an error retrieving data. Check your connection and reload the page.
-                    </EmptyStateBody>
-                  </EmptyState>
-                </Bullseye>
-              </Td>
-            </Tr>
-          </Tbody>
-        </Table>
-      </Card>
+      <Table aria-label="Loading table demo">
+        <Thead>
+          <Tr>
+            <Th>Repositories</Th>
+            <Th>Branches</Th>
+            <Th>Pull requests</Th>
+            <Th>Workspaces</Th>
+            <Th>Last commit</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          <Tr>
+            <Td colSpan={8}>
+              <Bullseye>
+                <EmptyState
+                  icon={ExclamationCircleIcon}
+                  titleText="Unable to connect"
+                  headingLevel="h2"
+                  variant={EmptyStateVariant.sm}
+                >
+                  <EmptyStateBody>
+                    There was an error retrieving data. Check your connection and reload the page.
+                  </EmptyStateBody>
+                </EmptyState>
+              </Bullseye>
+            </Td>
+          </Tr>
+        </Tbody>
+      </Table>
     </PageSection>
   </DashboardWrapper>
 );
diff --git a/packages/react-table/src/demos/examples/TableEmptyStateLoading.tsx b/packages/react-table/src/demos/examples/TableEmptyStateLoading.tsx
index 5f62121f078..5724d09158d 100644
--- a/packages/react-table/src/demos/examples/TableEmptyStateLoading.tsx
+++ b/packages/react-table/src/demos/examples/TableEmptyStateLoading.tsx
@@ -1,32 +1,30 @@
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
-import { Bullseye, Card, EmptyState, PageSection, Spinner } from '@patternfly/react-core';
+import { Bullseye, EmptyState, PageSection, Spinner } from '@patternfly/react-core';
 import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 
 export const TableEmptyStateLoading: React.FunctionComponent = () => (
   <DashboardWrapper hasPageTemplateTitle>
     <PageSection padding={{ default: 'noPadding', xl: 'padding' }} aria-label="Empty state table loading">
-      <Card component="div">
-        <Table aria-label="Loading table demo">
-          <Thead>
-            <Tr>
-              <Th>Repositories</Th>
-              <Th>Branches</Th>
-              <Th>Pull requests</Th>
-              <Th>Workspaces</Th>
-              <Th>Last commit</Th>
-            </Tr>
-          </Thead>
-          <Tbody>
-            <Tr>
-              <Td colSpan={8}>
-                <Bullseye>
-                  <EmptyState titleText="Loading" icon={Spinner} headingLevel="h2" />
-                </Bullseye>
-              </Td>
-            </Tr>
-          </Tbody>
-        </Table>
-      </Card>
+      <Table aria-label="Loading table demo">
+        <Thead>
+          <Tr>
+            <Th>Repositories</Th>
+            <Th>Branches</Th>
+            <Th>Pull requests</Th>
+            <Th>Workspaces</Th>
+            <Th>Last commit</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          <Tr>
+            <Td colSpan={8}>
+              <Bullseye>
+                <EmptyState titleText="Loading" icon={Spinner} headingLevel="h2" />
+              </Bullseye>
+            </Td>
+          </Tr>
+        </Tbody>
+      </Table>
     </PageSection>
   </DashboardWrapper>
 );
diff --git a/packages/react-table/src/demos/examples/TableExpandCollapseAll.tsx b/packages/react-table/src/demos/examples/TableExpandCollapseAll.tsx
index d3c23b5a326..2d594dad470 100644
--- a/packages/react-table/src/demos/examples/TableExpandCollapseAll.tsx
+++ b/packages/react-table/src/demos/examples/TableExpandCollapseAll.tsx
@@ -1,5 +1,5 @@
 import { Fragment, ReactNode, useEffect, useState } from 'react';
-import { Card, Content, Label, PageSection } from '@patternfly/react-core';
+import { Content, Label, PageSection } from '@patternfly/react-core';
 import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
 import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 
@@ -155,56 +155,54 @@ export const TableExpandCollapseAll: React.FunctionComponent = () => {
           }}
           aria-label="Collapsible table data"
         >
-          <Card component="div">
-            <Table isExpandable hasAnimations aria-label="Collapsible table">
-              <Thead>
-                <Tr>
-                  <Th
-                    expand={{
-                      areAllExpanded: !areAllExpanded,
-                      collapseAllAriaLabel,
-                      onToggle: onCollapseAll
-                    }}
-                    aria-label="Row expansion"
-                  />
-                  {expandableColumns.map((column) => (
-                    <Th key={column}>{column}</Th>
-                  ))}
-                </Tr>
-              </Thead>
+          <Table isExpandable hasAnimations aria-label="Collapsible table">
+            <Thead>
+              <Tr>
+                <Th
+                  expand={{
+                    areAllExpanded: !areAllExpanded,
+                    collapseAllAriaLabel,
+                    onToggle: onCollapseAll
+                  }}
+                  aria-label="Row expansion"
+                />
+                {expandableColumns.map((column) => (
+                  <Th key={column}>{column}</Th>
+                ))}
+              </Tr>
+            </Thead>
 
-              {serverData.map((server, serverIndex) => (
-                <Tbody key={server.name} isExpanded={isServerExpanded(server)}>
-                  <Tr isContentExpanded={isServerExpanded(server)}>
-                    <Td
-                      expand={
-                        server.details
-                          ? {
-                              rowIndex: serverIndex,
-                              isExpanded: isServerExpanded(server),
-                              onToggle: () => setServerExpanded(server, !isServerExpanded(server))
-                            }
-                          : undefined
-                      }
-                    >
-                      <ExpandableRowContent>{server.details}</ExpandableRowContent>
-                    </Td>
-                    <Td>{server?.name}</Td>
-                    <Td>{server?.threads}</Td>
-                    <Td>{server?.applications}</Td>
-                    <Td>{server?.workspaces}</Td>
-                    <Td>{server?.status?.title}</Td>
-                  </Tr>
-                  <Tr isExpanded={isServerExpanded(server)}>
-                    <Td></Td>
-                    <Td colSpan={expandableColumns.length}>
-                      <ExpandableRowContent>{server?.details}</ExpandableRowContent>
-                    </Td>
-                  </Tr>
-                </Tbody>
-              ))}
-            </Table>
-          </Card>
+            {serverData.map((server, serverIndex) => (
+              <Tbody key={server.name} isExpanded={isServerExpanded(server)}>
+                <Tr isContentExpanded={isServerExpanded(server)}>
+                  <Td
+                    expand={
+                      server.details
+                        ? {
+                            rowIndex: serverIndex,
+                            isExpanded: isServerExpanded(server),
+                            onToggle: () => setServerExpanded(server, !isServerExpanded(server))
+                          }
+                        : undefined
+                    }
+                  >
+                    <ExpandableRowContent>{server.details}</ExpandableRowContent>
+                  </Td>
+                  <Td>{server?.name}</Td>
+                  <Td>{server?.threads}</Td>
+                  <Td>{server?.applications}</Td>
+                  <Td>{server?.workspaces}</Td>
+                  <Td>{server?.status?.title}</Td>
+                </Tr>
+                <Tr isExpanded={isServerExpanded(server)}>
+                  <Td></Td>
+                  <Td colSpan={expandableColumns.length}>
+                    <ExpandableRowContent>{server?.details}</ExpandableRowContent>
+                  </Td>
+                </Tr>
+              </Tbody>
+            ))}
+          </Table>
         </PageSection>
       </DashboardWrapper>
     </Fragment>
diff --git a/packages/react-table/src/demos/examples/TableSortableResponsive.tsx b/packages/react-table/src/demos/examples/TableSortableResponsive.tsx
index fb522d4a9b3..58cda4339ce 100644
--- a/packages/react-table/src/demos/examples/TableSortableResponsive.tsx
+++ b/packages/react-table/src/demos/examples/TableSortableResponsive.tsx
@@ -1,7 +1,6 @@
 import { Fragment, useEffect, useState } from 'react';
 import {
   Button,
-  Card,
   Content,
   Dropdown,
   DropdownList,
@@ -245,86 +244,84 @@ export const TableSortableResponsive: React.FunctionComponent = () => {
           }}
           aria-label="Sortable table data"
         >
-          <Card component="div">
-            {tableToolbar}
-            <Table aria-label="Sortable Table">
-              <Thead>
-                <Tr>
-                  {columns.map((column, columnIndex) => {
-                    const sortParams = {
-                      sort: {
-                        sortBy: {
-                          index: activeSortIndex,
-                          direction: activeSortDirection
-                        },
-                        onSort,
-                        columnIndex
-                      }
-                    };
-                    return (
-                      <Th modifier={columnIndex !== 6 ? 'wrap' : undefined} key={columnIndex} {...sortParams}>
-                        {column}
-                      </Th>
-                    );
-                  })}
+          {tableToolbar}
+          <Table aria-label="Sortable Table">
+            <Thead>
+              <Tr>
+                {columns.map((column, columnIndex) => {
+                  const sortParams = {
+                    sort: {
+                      sortBy: {
+                        index: activeSortIndex,
+                        direction: activeSortDirection
+                      },
+                      onSort,
+                      columnIndex
+                    }
+                  };
+                  return (
+                    <Th modifier={columnIndex !== 6 ? 'wrap' : undefined} key={columnIndex} {...sortParams}>
+                      {column}
+                    </Th>
+                  );
+                })}
+              </Tr>
+            </Thead>
+            <Tbody>
+              {sortedRows.map((row, rowIndex) => (
+                <Tr key={rowIndex}>
+                  <>
+                    <Td dataLabel={columns[0]} width={15}>
+                      <div>{row.name}</div>
+                    </Td>
+                    <Td dataLabel={columns[1]} width={10}>
+                      <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                        <FlexItem>
+                          <CodeBranchIcon key="icon" />
+                        </FlexItem>
+                        <FlexItem>{row.threads}</FlexItem>
+                      </Flex>
+                    </Td>
+                    <Td dataLabel={columns[2]} width={10}>
+                      <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                        <FlexItem>
+                          <CodeIcon key="icon" />
+                        </FlexItem>
+                        <FlexItem>{row.applications}</FlexItem>
+                      </Flex>
+                    </Td>
+                    <Td dataLabel={columns[3]} width={10}>
+                      <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                        <FlexItem>
+                          <CubeIcon key="icon" />
+                        </FlexItem>
+                        <FlexItem>{row.workspaces}</FlexItem>
+                      </Flex>
+                    </Td>
+                    <Td dataLabel={columns[4]} width={15}>
+                      <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                        <FlexItem>{renderLabel(row.status)}</FlexItem>
+                      </Flex>
+                    </Td>
+                    <Td dataLabel={columns[5]} width={10}>
+                      <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                        <FlexItem>{row.location}</FlexItem>
+                      </Flex>
+                    </Td>
+                    <Td dataLabel={columns[6]} width={10}>
+                      <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                        <FlexItem>{row.lastModified[0]} days ago</FlexItem>
+                      </Flex>
+                    </Td>
+                    <Td dataLabel={columns[7]} modifier="truncate">
+                      <a href="#">{row.url}</a>
+                    </Td>
+                  </>
                 </Tr>
-              </Thead>
-              <Tbody>
-                {sortedRows.map((row, rowIndex) => (
-                  <Tr key={rowIndex}>
-                    <>
-                      <Td dataLabel={columns[0]} width={15}>
-                        <div>{row.name}</div>
-                      </Td>
-                      <Td dataLabel={columns[1]} width={10}>
-                        <Flex spaceItems={{ default: 'spaceItemsSm' }}>
-                          <FlexItem>
-                            <CodeBranchIcon key="icon" />
-                          </FlexItem>
-                          <FlexItem>{row.threads}</FlexItem>
-                        </Flex>
-                      </Td>
-                      <Td dataLabel={columns[2]} width={10}>
-                        <Flex spaceItems={{ default: 'spaceItemsSm' }}>
-                          <FlexItem>
-                            <CodeIcon key="icon" />
-                          </FlexItem>
-                          <FlexItem>{row.applications}</FlexItem>
-                        </Flex>
-                      </Td>
-                      <Td dataLabel={columns[3]} width={10}>
-                        <Flex spaceItems={{ default: 'spaceItemsSm' }}>
-                          <FlexItem>
-                            <CubeIcon key="icon" />
-                          </FlexItem>
-                          <FlexItem>{row.workspaces}</FlexItem>
-                        </Flex>
-                      </Td>
-                      <Td dataLabel={columns[4]} width={15}>
-                        <Flex spaceItems={{ default: 'spaceItemsSm' }}>
-                          <FlexItem>{renderLabel(row.status)}</FlexItem>
-                        </Flex>
-                      </Td>
-                      <Td dataLabel={columns[5]} width={10}>
-                        <Flex spaceItems={{ default: 'spaceItemsSm' }}>
-                          <FlexItem>{row.location}</FlexItem>
-                        </Flex>
-                      </Td>
-                      <Td dataLabel={columns[6]} width={10}>
-                        <Flex spaceItems={{ default: 'spaceItemsSm' }}>
-                          <FlexItem>{row.lastModified[0]} days ago</FlexItem>
-                        </Flex>
-                      </Td>
-                      <Td dataLabel={columns[7]} modifier="truncate">
-                        <a href="#">{row.url}</a>
-                      </Td>
-                    </>
-                  </Tr>
-                ))}
-              </Tbody>
-            </Table>
-            {renderPagination('bottom', false)}
-          </Card>
+              ))}
+            </Tbody>
+          </Table>
+          {renderPagination('bottom', false)}
         </PageSection>
       </DashboardWrapper>
     </Fragment>
diff --git a/packages/react-table/src/demos/examples/TableStaticBottomPagination.tsx b/packages/react-table/src/demos/examples/TableStaticBottomPagination.tsx
index b67485b4e3a..af7f2b0302d 100644
--- a/packages/react-table/src/demos/examples/TableStaticBottomPagination.tsx
+++ b/packages/react-table/src/demos/examples/TableStaticBottomPagination.tsx
@@ -1,7 +1,6 @@
 import { Fragment, useState } from 'react';
 import {
   Button,
-  Card,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
@@ -143,37 +142,35 @@ export const TableStaticBottomPagination: React.FunctionComponent = () => {
     <Fragment>
       <DashboardWrapper hasPageTemplateTitle>
         <PageSection isFilled aria-label="Paginated table data">
-          <Card>
-            {tableToolbar}
-            <Table variant="compact" aria-label="Paginated Table">
-              <Thead>
-                <Tr>
-                  {columns.map((column, columnIndex) => (
-                    <Th key={columnIndex}>{column}</Th>
-                  ))}
-                </Tr>
-              </Thead>
-              <Tbody>
-                {paginatedRows.map((row, rowIndex) => (
-                  <Tr key={rowIndex}>
-                    <Td dataLabel={columns[0]}>{row.name}</Td>
-                    <Td dataLabel={columns[1]}>{row.threads}</Td>
-                    <Td dataLabel={columns[2]}>{row.applications}</Td>
-                    <Td dataLabel={columns[3]}>{row.workspaces}</Td>
-                    <Td dataLabel={columns[4]}>{renderLabel(row.status)}</Td>
-                    <Td dataLabel={columns[5]}>{row.location}</Td>
-                    <Td dataLabel={columns[6]}>{row.lastModified}</Td>
-                    <Td dataLabel={columns[7]} modifier="truncate">
-                      <TableText>
-                        <a href="#">{row.url}</a>
-                      </TableText>
-                    </Td>
-                  </Tr>
+          {tableToolbar}
+          <Table variant="compact" aria-label="Paginated Table">
+            <Thead>
+              <Tr>
+                {columns.map((column, columnIndex) => (
+                  <Th key={columnIndex}>{column}</Th>
                 ))}
-              </Tbody>
-            </Table>
-            {renderPagination('bottom', false)}
-          </Card>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {paginatedRows.map((row, rowIndex) => (
+                <Tr key={rowIndex}>
+                  <Td dataLabel={columns[0]}>{row.name}</Td>
+                  <Td dataLabel={columns[1]}>{row.threads}</Td>
+                  <Td dataLabel={columns[2]}>{row.applications}</Td>
+                  <Td dataLabel={columns[3]}>{row.workspaces}</Td>
+                  <Td dataLabel={columns[4]}>{renderLabel(row.status)}</Td>
+                  <Td dataLabel={columns[5]}>{row.location}</Td>
+                  <Td dataLabel={columns[6]}>{row.lastModified}</Td>
+                  <Td dataLabel={columns[7]} modifier="truncate">
+                    <TableText>
+                      <a href="#">{row.url}</a>
+                    </TableText>
+                  </Td>
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+          {renderPagination('bottom', false)}
         </PageSection>
       </DashboardWrapper>
     </Fragment>
diff --git a/packages/react-table/src/demos/examples/TableStickyFirstColumn.tsx b/packages/react-table/src/demos/examples/TableStickyFirstColumn.tsx
index 535316bf399..4d5caf30812 100644
--- a/packages/react-table/src/demos/examples/TableStickyFirstColumn.tsx
+++ b/packages/react-table/src/demos/examples/TableStickyFirstColumn.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer } from '@patternfly/react-table';
-import { Card, PageSection } from '@patternfly/react-core';
+import { PageSection } from '@patternfly/react-core';
 import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 
 type Direction = 'asc' | 'desc' | undefined;
@@ -140,96 +140,88 @@ export const TableStickyFirstColumn = () => {
         padding={{ default: 'noPadding', xl: 'padding' }}
         aria-label="Sticky column table data"
       >
-        <Card component="div">
-          <InnerScrollContainer>
-            <Table aria-label="Sticky column table" gridBreakPoint="">
-              <Thead>
-                <Tr>
-                  <Th
-                    isStickyColumn
-                    stickyMinWidth="100px"
-                    hasRightBorder
-                    modifier="fitContent"
-                    sort={getSortParams(0)}
-                  >
-                    {columnNames.name}
+        <InnerScrollContainer>
+          <Table aria-label="Sticky column table" gridBreakPoint="">
+            <Thead>
+              <Tr>
+                <Th isStickyColumn stickyMinWidth="100px" hasRightBorder modifier="fitContent" sort={getSortParams(0)}>
+                  {columnNames.name}
+                </Th>
+                <Th modifier="fitContent" sort={getSortParams(1)}>
+                  {columnNames.state}
+                </Th>
+                <Th>{columnNames.header3}</Th>
+                <Th>{columnNames.header4}</Th>
+                <Th>{columnNames.header5}</Th>
+                <Th>{columnNames.header6}</Th>
+                <Th>{columnNames.header7}</Th>
+                <Th>{columnNames.header8}</Th>
+                <Th>{columnNames.header9}</Th>
+                <Th>{columnNames.header10}</Th>
+                <Th>{columnNames.header11}</Th>
+                <Th>{columnNames.header12}</Th>
+                <Th>{columnNames.header13}</Th>
+                <Th>{columnNames.header14}</Th>
+                <Th>{columnNames.header15}</Th>
+                <Th>{columnNames.header16}</Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {sortedFacts.map((fact) => (
+                <Tr key={fact.name}>
+                  <Th isStickyColumn stickyMinWidth="100px" hasRightBorder modifier="truncate">
+                    {fact.name}
                   </Th>
-                  <Th modifier="fitContent" sort={getSortParams(1)}>
-                    {columnNames.state}
-                  </Th>
-                  <Th>{columnNames.header3}</Th>
-                  <Th>{columnNames.header4}</Th>
-                  <Th>{columnNames.header5}</Th>
-                  <Th>{columnNames.header6}</Th>
-                  <Th>{columnNames.header7}</Th>
-                  <Th>{columnNames.header8}</Th>
-                  <Th>{columnNames.header9}</Th>
-                  <Th>{columnNames.header10}</Th>
-                  <Th>{columnNames.header11}</Th>
-                  <Th>{columnNames.header12}</Th>
-                  <Th>{columnNames.header13}</Th>
-                  <Th>{columnNames.header14}</Th>
-                  <Th>{columnNames.header15}</Th>
-                  <Th>{columnNames.header16}</Th>
+                  <Td modifier="nowrap" dataLabel={columnNames.state}>
+                    {fact.state}
+                  </Td>
+                  <Td modifier="nowrap" dataLabel={columnNames.header3}>
+                    {fact.detail1}
+                  </Td>
+                  <Td modifier="nowrap" dataLabel={columnNames.header4}>
+                    {fact.detail2}
+                  </Td>
+                  <Td modifier="nowrap" dataLabel={columnNames.header5}>
+                    {fact.detail3}
+                  </Td>
+                  <Td modifier="nowrap" dataLabel={columnNames.header6}>
+                    {fact.detail4}
+                  </Td>
+                  <Td modifier="nowrap" dataLabel={columnNames.header7}>
+                    {fact.detail5}
+                  </Td>
+                  <Td modifier="nowrap" dataLabel={columnNames.header8}>
+                    {fact.detail6}
+                  </Td>
+                  <Td modifier="nowrap" dataLabel={columnNames.header9}>
+                    {fact.detail7}
+                  </Td>
+                  <Td modifier="nowrap" dataLabel={columnNames.header10}>
+                    {fact.detail8}
+                  </Td>
+                  <Td modifier="nowrap" dataLabel={columnNames.header11}>
+                    {fact.detail9}
+                  </Td>
+                  <Td modifier="nowrap" dataLabel={columnNames.header12}>
+                    {fact.detail10}
+                  </Td>
+                  <Td modifier="nowrap" dataLabel={columnNames.header13}>
+                    {fact.detail11}
+                  </Td>
+                  <Td modifier="nowrap" dataLabel={columnNames.header14}>
+                    {fact.detail12}
+                  </Td>
+                  <Td modifier="nowrap" dataLabel={columnNames.header15}>
+                    {fact.detail13}
+                  </Td>
+                  <Td modifier="nowrap" dataLabel={columnNames.header16}>
+                    {fact.detail14}
+                  </Td>
                 </Tr>
-              </Thead>
-              <Tbody>
-                {sortedFacts.map((fact) => (
-                  <Tr key={fact.name}>
-                    <Th isStickyColumn stickyMinWidth="100px" hasRightBorder modifier="truncate">
-                      {fact.name}
-                    </Th>
-                    <Td modifier="nowrap" dataLabel={columnNames.state}>
-                      {fact.state}
-                    </Td>
-                    <Td modifier="nowrap" dataLabel={columnNames.header3}>
-                      {fact.detail1}
-                    </Td>
-                    <Td modifier="nowrap" dataLabel={columnNames.header4}>
-                      {fact.detail2}
-                    </Td>
-                    <Td modifier="nowrap" dataLabel={columnNames.header5}>
-                      {fact.detail3}
-                    </Td>
-                    <Td modifier="nowrap" dataLabel={columnNames.header6}>
-                      {fact.detail4}
-                    </Td>
-                    <Td modifier="nowrap" dataLabel={columnNames.header7}>
-                      {fact.detail5}
-                    </Td>
-                    <Td modifier="nowrap" dataLabel={columnNames.header8}>
-                      {fact.detail6}
-                    </Td>
-                    <Td modifier="nowrap" dataLabel={columnNames.header9}>
-                      {fact.detail7}
-                    </Td>
-                    <Td modifier="nowrap" dataLabel={columnNames.header10}>
-                      {fact.detail8}
-                    </Td>
-                    <Td modifier="nowrap" dataLabel={columnNames.header11}>
-                      {fact.detail9}
-                    </Td>
-                    <Td modifier="nowrap" dataLabel={columnNames.header12}>
-                      {fact.detail10}
-                    </Td>
-                    <Td modifier="nowrap" dataLabel={columnNames.header13}>
-                      {fact.detail11}
-                    </Td>
-                    <Td modifier="nowrap" dataLabel={columnNames.header14}>
-                      {fact.detail12}
-                    </Td>
-                    <Td modifier="nowrap" dataLabel={columnNames.header15}>
-                      {fact.detail13}
-                    </Td>
-                    <Td modifier="nowrap" dataLabel={columnNames.header16}>
-                      {fact.detail14}
-                    </Td>
-                  </Tr>
-                ))}
-              </Tbody>
-            </Table>
-          </InnerScrollContainer>
-        </Card>
+              ))}
+            </Tbody>
+          </Table>
+        </InnerScrollContainer>
       </PageSection>
     </DashboardWrapper>
   );
diff --git a/packages/react-table/src/demos/examples/TableStickyHeader.tsx b/packages/react-table/src/demos/examples/TableStickyHeader.tsx
index 3281b7bf492..1bbd3df7132 100644
--- a/packages/react-table/src/demos/examples/TableStickyHeader.tsx
+++ b/packages/react-table/src/demos/examples/TableStickyHeader.tsx
@@ -1,4 +1,4 @@
-import { Card, Label, PageSection } from '@patternfly/react-core';
+import { Label, PageSection } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td, TableText } from '@patternfly/react-table';
 import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 import { rows, columns } from '@patternfly/react-table/dist/esm/demos/sampleData';
@@ -20,40 +20,38 @@ export const TableStickyHeader: React.FunctionComponent = () => {
   return (
     <DashboardWrapper hasPageTemplateTitle>
       <PageSection padding={{ default: 'noPadding', xl: 'padding' }} aria-label="Sticky header table data">
-        <Card component="div">
-          <Table aria-label="Sticky Header Table Demo" isStickyHeader>
-            <Thead>
-              <Tr>
-                <Th width={15}>{columns[0]}</Th>
-                <Th width={10}>{columns[1]}</Th>
-                <Th width={10}>{columns[2]}</Th>
-                <Th width={10}>{columns[3]}</Th>
-                <Th width={10}>{columns[4]}</Th>
-                <Th width={15}>{columns[5]}</Th>
-                <Th width={15}>{columns[6]}</Th>
-                <Th width={10}>{columns[7]}</Th>
+        <Table aria-label="Sticky Header Table Demo" isStickyHeader>
+          <Thead>
+            <Tr>
+              <Th width={15}>{columns[0]}</Th>
+              <Th width={10}>{columns[1]}</Th>
+              <Th width={10}>{columns[2]}</Th>
+              <Th width={10}>{columns[3]}</Th>
+              <Th width={10}>{columns[4]}</Th>
+              <Th width={15}>{columns[5]}</Th>
+              <Th width={15}>{columns[6]}</Th>
+              <Th width={10}>{columns[7]}</Th>
+            </Tr>
+          </Thead>
+          <Tbody>
+            {rows.map((row) => (
+              <Tr key={row.name}>
+                <Td dataLabel={columns[0]}>{row.name}</Td>
+                <Td dataLabel={columns[1]}>{row.threads}</Td>
+                <Td dataLabel={columns[2]}>{row.applications}</Td>
+                <Td dataLabel={columns[3]}>{row.workspaces}</Td>
+                <Td dataLabel={columns[4]}>{renderLabel(row.status)}</Td>
+                <Td dataLabel={columns[5]}>{row.location}</Td>
+                <Td dataLabel={columns[6]}>{row.lastModified}</Td>
+                <Td dataLabel={columns[7]}>
+                  <a href="#">
+                    <TableText wrapModifier="truncate">{row.url} </TableText>
+                  </a>
+                </Td>
               </Tr>
-            </Thead>
-            <Tbody>
-              {rows.map((row) => (
-                <Tr key={row.name}>
-                  <Td dataLabel={columns[0]}>{row.name}</Td>
-                  <Td dataLabel={columns[1]}>{row.threads}</Td>
-                  <Td dataLabel={columns[2]}>{row.applications}</Td>
-                  <Td dataLabel={columns[3]}>{row.workspaces}</Td>
-                  <Td dataLabel={columns[4]}>{renderLabel(row.status)}</Td>
-                  <Td dataLabel={columns[5]}>{row.location}</Td>
-                  <Td dataLabel={columns[6]}>{row.lastModified}</Td>
-                  <Td dataLabel={columns[7]}>
-                    <a href="#">
-                      <TableText wrapModifier="truncate">{row.url} </TableText>
-                    </a>
-                  </Td>
-                </Tr>
-              ))}
-            </Tbody>
-          </Table>
-        </Card>
+            ))}
+          </Tbody>
+        </Table>
       </PageSection>
     </DashboardWrapper>
   );