diff --git a/ADRs/007_Table_component.md b/ADRs/007_Table_component.md
index 40fc0d8f..30be59cd 100644
--- a/ADRs/007_Table_component.md
+++ b/ADRs/007_Table_component.md
@@ -1,6 +1,6 @@
 # 007. Table component
 
-Last update: 19.09.2022
+Last update: 29.11.2023
 
 ## Background
 
@@ -63,6 +63,9 @@ Challenges
 We decided for option two as the ability to pass children components is a must-have. Hopefully if that can be solved 
 in the future we may be able to have a table-data component that encapsulates better the table.
 
+The flexbox model is only adapted for tables that require the colspan feature as not all existing features (text truncation and expansion on hover, expanding column sizes) can be realized while applying flexbox. This also saves performance as dynamic
+calculation of cell width via JavaScript could be a performance issue in larger tables. 
+
 ### Note
 We implemented the table using shadow dom for consistency and to support slots, but most of the classes are 
 declared in the host elements meaning they live still in the light-dom and can be overwritten.
diff --git a/packages/core-components/src/components/table/stories.data.ts b/packages/core-components/src/components/table/stories.data.ts
index e1a59ba5..65dc080d 100644
--- a/packages/core-components/src/components/table/stories.data.ts
+++ b/packages/core-components/src/components/table/stories.data.ts
@@ -32,7 +32,6 @@ export const longSampleData = {
     'Column 4',
     'Column 5',
     'Column 6',
-    'Column 7',
   ],
   rows: [
     [
diff --git a/packages/core-components/src/components/table/table.docs.mdx b/packages/core-components/src/components/table/table.docs.mdx
index 958b873f..27393363 100644
--- a/packages/core-components/src/components/table/table.docs.mdx
+++ b/packages/core-components/src/components/table/table.docs.mdx
@@ -74,6 +74,23 @@ example, parent size is 400px, and text is truncated.
 <br />
 <hr />
 
+#### colspan
+
+If the table size is set to colspan, it will behave like an equal sized table. Additionally, a `colspan` property is available
+for individual `b2b-table-cell` or `b2b-table-header` elements that accepts any positive integer and allows you to set the cell
+size in relation to the number of cells in a row. Text will always wrap and never truncate in this case.
+
+```html
+<div id="parent" style="width: 500px">
+  <b2b-table size="colspan">
+    ...
+    <b2b-table-cell colspan="3">...</b2b-table-cell>
+  </b2b-table>
+</div>
+```
+
+<Canvas of={TableStories.ColspanTable} />
+
 ### b2b-table-rowgroup
 
 Rowgroup will let you group rows based on context: `header`, `body` or `footer`.
@@ -270,7 +287,7 @@ it will only go back to its unsorted state automatically, when the user clicks o
 </b2b-table>
 ```
 
-## Events
+#### Events
 
 When the user interacts with sorting, the `b2b-table` will emit a `b2b-sort-change` event that will contain
 information about the sorted header and the direction selected. You can provide the property `sort-id` to the
@@ -443,7 +460,7 @@ _Vue Notation_
 </b2b-table>
 ```
 
-### Sizing
+## Sizing
 
 ### Fixed cell width
 
diff --git a/packages/core-components/src/components/table/table.stories.tsx b/packages/core-components/src/components/table/table.stories.tsx
index e7a301b8..c987bca6 100644
--- a/packages/core-components/src/components/table/table.stories.tsx
+++ b/packages/core-components/src/components/table/table.stories.tsx
@@ -49,6 +49,12 @@ const meta: Meta = {
     parentWidth: { table: { disable: true } },
     firstColumnWidth: { table: { disable: true } },
     firstRowHeight: { table: { disable: true } },
+    colspan: { table: { disable: true } },
+    divider: { table: { disable: true } },
+    checked: { table: { disable: true } },
+    indeterminate: { table: { disable: true } },
+    fixed: { table: { disable: true } },
+    sortId: { table: { disable: true } },
   },
   render: ({ ...args }) => html`<div style="width: ${
     args.parentWidth
@@ -383,7 +389,7 @@ export const AccordionTable: Story = {
   </div>`,
 };
 
-export const Selectable: Story = {
+export const SelectableTable: Story = {
   args: {
     ...meta.args,
   },
@@ -444,3 +450,56 @@ export const Selectable: Story = {
     </b2b-table>
   </div>`,
 };
+
+export const ColspanTable: Story = {
+  args: {
+    ...meta.args,
+    size: 'colspan',
+    selectable: false,
+    withDividers: true,
+  },
+  render: ({ ...args }) => html`<div style="width: 500px">
+    <b2b-table size="${args.size}">
+      <b2b-table-rowgroup type="header" selectable="${args.selectable}">
+        <b2b-table-row>
+          <b2b-table-header divider="${args.withDividers}" colspan="2"
+            >2 Columns</b2b-table-header
+          >
+          <b2b-table-header divider="${args.withDividers}"
+            >1 Column</b2b-table-header
+          >
+          <b2b-table-header>1 Column</b2b-table-header>
+        </b2b-table-row>
+      </b2b-table-rowgroup>
+      <b2b-table-rowgroup type="body" selectable="${args.selectable}">
+        <b2b-table-row>
+          <b2b-table-cell divider="${args.withDividers}"
+            >1 Column</b2b-table-cell
+          >
+          <b2b-table-cell colspan="3">3 Columns</b2b-table-cell>
+        </b2b-table-row>
+        <b2b-table-row>
+          <b2b-table-cell divider="${args.withDividers}"
+            >1 Column</b2b-table-cell
+          >
+          <b2b-table-cell divider="${args.withDividers}"
+            >1 Column</b2b-table-cell
+          >
+          <b2b-table-cell divider="${args.withDividers}"
+            >1 Column</b2b-table-cell
+          >
+          <b2b-table-cell>1 Column</b2b-table-cell>
+        </b2b-table-row>
+        <b2b-table-row>
+          <b2b-table-cell divider="${args.withDividers}" colspan="2"
+            >2 Columns</b2b-table-cell
+          >
+          <b2b-table-cell divider="${args.withDividers}"
+            >1 Column</b2b-table-cell
+          >
+          <b2b-table-cell>1 Column</b2b-table-cell>
+        </b2b-table-row>
+      </b2b-table-rowgroup>
+    </b2b-table>
+  </div>`,
+};