diff --git a/pages/table/embedded-in-alert.page.tsx b/pages/table/embedded-in-alert.page.tsx
new file mode 100644
index 0000000000..bd481ad199
--- /dev/null
+++ b/pages/table/embedded-in-alert.page.tsx
@@ -0,0 +1,66 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+
+import Alert from '~components/alert';
+import Box from '~components/box';
+import Header from '~components/header';
+import SpaceBetween from '~components/space-between';
+import Table, { TableProps } from '~components/table';
+
+import ScreenshotArea from '../utils/screenshot-area';
+import { generateItems } from './generate-data';
+import { columnsConfig } from './shared-configs';
+
+const tableItems = generateItems(6);
+
+export default () => {
+ return (
+
+ Table embedded in alert
+
+
+
+ Some description
+
+
+
+
+
+ Some description
+
+
+
+
+
+ Some description
+
+
+
+
+
+
+
+ );
+};
+
+const ExampleTable = ({ variant }: { variant: TableProps.Variant }) => {
+ const [selectedItems, setSelectedItems] = useState([tableItems[tableItems.length - 1]]);
+
+ return (
+ setSelectedItems(detail.selectedItems)}
+ selectedItems={selectedItems}
+ columnDefinitions={columnsConfig}
+ items={tableItems}
+ selectionType="multi"
+ header={Table with variant {variant}}
+ ariaLabels={{
+ selectionGroupLabel: 'Items selection',
+ allItemsSelectionLabel: () => 'select all',
+ itemSelectionLabel: (selection, item) => item.id,
+ }}
+ />
+ );
+};
diff --git a/src/container/styles.scss b/src/container/styles.scss
index e052def6ca..e9d6b4a901 100644
--- a/src/container/styles.scss
+++ b/src/container/styles.scss
@@ -127,6 +127,11 @@
background-color: awsui.$color-background-layout-main;
}
+ // "embedded" variant is passed to container only from table variants "borderless" and "embedded"
+ &-variant-embedded:not(.header-sticky-enabled) {
+ background-color: transparent;
+ }
+
&.header-with-media {
background: none;
&:not(:empty) {
diff --git a/src/table/header-cell/styles.scss b/src/table/header-cell/styles.scss
index 4cd0b59b48..ad5b4df22e 100644
--- a/src/table/header-cell/styles.scss
+++ b/src/table/header-cell/styles.scss
@@ -75,6 +75,10 @@ $cell-horizontal-padding: awsui.$space-scaled-l;
&-variant-full-page.header-cell-hidden {
border-block-end-color: transparent;
}
+ &-variant-embedded:not(.header-cell-sticky),
+ &-variant-borderless:not(.header-cell-sticky) {
+ background: none;
+ }
&:last-child,
&.header-cell-sortable {
padding-inline-end: awsui.$space-xs;