diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 05ebbadbf..03dbae023 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -351,26 +351,28 @@ const TableRow = styled.tr<TableRowProps>`
     border-bottom: none;
   }
 
-  @media (max-width: 768px) {
-    position: relative;
-    display: flex;
-    flex-wrap: wrap;
-    ${({ theme, $isSelectable = false, $showActions = false }) => `
-      border: ${theme.click.table.cell.stroke} solid ${
-        theme.click.table.row.color.stroke.default
-      };
-      border-radius: ${theme.click.table.radii.all};
-      ${
-        $isSelectable
-          ? `padding-left: calc(${theme.click.table.body.cell.space.sm.x} + ${theme.click.table.body.cell.space.sm.x} + ${theme.click.checkbox.size.all});`
-          : ''
-      }
-      ${
-        $showActions
-          ? `padding-right: calc(${theme.click.table.body.cell.space.sm.x} + ${theme.click.table.body.cell.space.sm.x} + ${theme.click.image.sm.size.width} + ${theme.click.button.iconButton.default.space.x} + ${theme.click.button.iconButton.default.space.x});`
-          : ''
-      }
-    `}
+  [data-responsive-mode='list'] & {
+    @media (max-width: ${({ theme }) => theme.breakpoint.sizes.md}) {
+      position: relative;
+      display: flex;
+      flex-wrap: wrap;
+      ${({ theme, $isSelectable = false, $showActions = false }) => `
+        border: ${theme.click.table.cell.stroke} solid ${
+          theme.click.table.row.color.stroke.default
+        };
+        border-radius: ${theme.click.table.radii.all};
+        ${
+          $isSelectable
+            ? `padding-left: calc(${theme.click.table.body.cell.space.sm.x} + ${theme.click.table.body.cell.space.sm.x} + ${theme.click.checkbox.size.all});`
+            : ''
+        }
+        ${
+          $showActions
+            ? `padding-right: calc(${theme.click.table.body.cell.space.sm.x} + ${theme.click.table.body.cell.space.sm.x} + ${theme.click.image.sm.size.width} + ${theme.click.button.iconButton.default.space.x} + ${theme.click.button.iconButton.default.space.x});`
+            : ''
+        }
+      `}
+    }
   }
 `;
 
@@ -381,18 +383,22 @@ const TableData = styled.td<{ $size: TableSize }>`
     font: ${theme.click.table.cell.text.default};
     padding: ${theme.click.table.body.cell.space[$size].y} ${theme.click.table.body.cell.space[$size].x};
   `}
-  @media (max-width: 768px) {
-    width: auto;
-    min-width: 40%;
-    ${({ theme }) => `
-      padding: ${theme.click.table.body.cell.space.sm.y} ${theme.click.table.body.cell.space.sm.x};
-    `}
+  [data-responsive-mode="list"] & {
+    @media (max-width: ${({ theme }) => theme.breakpoint.sizes.md}) {
+      width: auto;
+      min-width: 40%;
+      ${({ theme }) => `
+        padding: ${theme.click.table.body.cell.space.sm.y} ${theme.click.table.body.cell.space.sm.x};
+      `}
+    }
   }
 `;
 
 const StyledColGroup = styled.colgroup`
-  @media (max-width: 768px) {
-    display: none;
+  [data-responsive-mode='list'] & {
+    @media (max-width: ${({ theme }) => theme.breakpoint.sizes.md}) {
+      display: none;
+    }
   }
 `;
 const StyledThead = styled.thead`
@@ -404,8 +410,10 @@ const StyledThead = styled.thead`
     }) => ` border-bottom: ${theme.click.table.cell.stroke} solid ${theme.click.table.row.color.stroke.default};
   `}
   }
-  @media (max-width: 768px) {
-    display: none;
+  [data-responsive-mode='list'] & {
+    @media (max-width: ${({ theme }) => theme.breakpoint.sizes.md}) {
+      display: none;
+    }
   }
 `;
 
@@ -415,15 +423,19 @@ const MobileHeader = styled.div`
     color: ${theme.click.table.row.color.label.default};
     font:  ${theme.click.table.cell.label.default};
   `}
-  @media (max-width: 768px) {
-    display: block;
+  [data-responsive-mode="list"] & {
+    @media (max-width: ${({ theme }) => theme.breakpoint.sizes.md}) {
+      display: block;
+    }
   }
 `;
 const Tbody = styled.tbody`
-  @media (max-width: 768px) {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
+  [data-responsive-mode='list'] & {
+    @media (max-width: ${({ theme }) => theme.breakpoint.sizes.md}) {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+    }
   }
 `;
 
@@ -434,17 +446,19 @@ const SelectData = styled.td<{ $size: TableSize }>`
     font: ${theme.click.table.cell.text.default};
     padding: ${theme.click.table.body.cell.space[$size].y} ${theme.click.table.body.cell.space[$size].x};
   `}
-  @media (max-width: 768px) {
-    width: auto;
-    align-self: stretch;
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    ${({ theme }) => `
-      padding: ${theme.click.table.body.cell.space.sm.y} ${theme.click.table.body.cell.space.sm.x};
-      border-right: ${theme.click.table.cell.stroke} solid ${theme.click.table.row.color.stroke.default};
-    `}
+  [data-responsive-mode="list"] & {
+    @media (max-width: ${({ theme }) => theme.breakpoint.sizes.md}) {
+      width: auto;
+      align-self: stretch;
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      ${({ theme }) => `
+        padding: ${theme.click.table.body.cell.space.sm.y} ${theme.click.table.body.cell.space.sm.x};
+        border-right: ${theme.click.table.cell.stroke} solid ${theme.click.table.row.color.stroke.default};
+      `}
+    }
   }
 `;
 const ActionsList = styled.td<{ $size: TableSize }>`
@@ -454,17 +468,19 @@ const ActionsList = styled.td<{ $size: TableSize }>`
     font: ${theme.click.table.cell.text.default};
     padding: ${theme.click.table.body.cell.space[$size].y} ${theme.click.table.body.cell.space[$size].x};
   `}
-  @media (max-width: 768px) {
-    width: auto;
-    align-self: stretch;
-    position: absolute;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    ${({ theme }) => `
-      padding: ${theme.click.table.body.cell.space.sm.y} ${theme.click.table.body.cell.space.sm.x};
-      border-left: 1px solid ${theme.click.table.row.color.stroke.default};
-    `}
+  [data-responsive-mode="list"] & {
+    @media (max-width: ${({ theme }) => theme.breakpoint.sizes.md}) {
+      width: auto;
+      align-self: stretch;
+      position: absolute;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      ${({ theme }) => `
+        padding: ${theme.click.table.body.cell.space.sm.y} ${theme.click.table.body.cell.space.sm.x};
+        border-left: 1px solid ${theme.click.table.row.color.stroke.default};
+      `}
+    }
   }
 `;
 
@@ -473,10 +489,12 @@ const ActionsContainer = styled.div`
   flex-wrap: wrap;
   gap: 0.5rem;
   overflow: hidden;
-  @media (max-width: 768px) {
-    flex-direction: column;
-    overflow: auto;
-    flex-wrap: nowrap;
+  [data-responsive-mode='list'] & {
+    @media (max-width: ${({ theme }) => theme.breakpoint.sizes.md}) {
+      flex-direction: column;
+      overflow: auto;
+      flex-wrap: nowrap;
+    }
   }
 `;
 
@@ -499,11 +517,13 @@ const TableOuterContainer = styled.div`
 
 const MobileActions = styled.div`
   display: none;
-  @media (max-width: 768px) {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 ${({ theme }) => theme.click.table.body.cell.space.sm.x};
+  [data-responsive-mode='list'] & {
+    @media (max-width: ${({ theme }) => theme.breakpoint.sizes.md}) {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 ${({ theme }) => theme.click.table.body.cell.space.sm.x};
+    }
   }
 `;
 const EditButton = styled.button`
@@ -559,6 +579,8 @@ interface CommonTableProps extends Omit<
   showHeader?: boolean;
   rowHeight?: string;
   resizableColumns?: boolean;
+  /** Disables mobile list view on narrow screens. When true, table uses horizontal scroll instead. Default: false */
+  disableMobileListView?: boolean;
 }
 
 type SelectReturnValue = {
@@ -747,6 +769,7 @@ const Table = forwardRef<HTMLTableElement, TableProps>(
       showHeader = true,
       rowHeight,
       resizableColumns,
+      disableMobileListView = false,
       ...props
     },
     ref
@@ -943,7 +966,9 @@ const Table = forwardRef<HTMLTableElement, TableProps>(
     );
 
     return (
-      <TableOuterContainer>
+      <TableOuterContainer
+        data-responsive-mode={disableMobileListView ? 'scroll' : 'list'}
+      >
         {hasRows && showHeader && (
           <MobileActions>
             {isSelectable && (
@@ -1137,9 +1162,11 @@ const StyledTable = styled.table`
   overflow: visible;
   table-layout: fixed;
 
-  @media (max-width: 768px) {
-    border: none;
-    table-layout: auto;
+  [data-responsive-mode='list'] & {
+    @media (max-width: ${({ theme }) => theme.breakpoint.sizes.md}) {
+      border: none;
+      table-layout: auto;
+    }
   }
 `;