diff --git a/blocks/table/table.css b/blocks/table/table.css
index d69fc07b..c62c7d97 100644
--- a/blocks/table/table.css
+++ b/blocks/table/table.css
@@ -11,10 +11,10 @@ table td {
 }
 
 .heading-top tr:first-child td {
-    background-color: var(--primary-color); /* Specify your desired background color here */
+    background-color: var(--primary-color);
 }
 
-.heading-left tr td:first-child {
+.left-heading {
     background-color: var(--primary-color);
     text-align: left;
 }
diff --git a/blocks/table/table.js b/blocks/table/table.js
index 6fb200b1..16762b1a 100644
--- a/blocks/table/table.js
+++ b/blocks/table/table.js
@@ -7,6 +7,23 @@ function removeClassesFromChildTables(table) {
 }
 
 export default function decorate(block) {
+  const getHeadingLeftClass = block.classList.contains('heading-left');
+  if (getHeadingLeftClass !== null && getHeadingLeftClass !== undefined) {
+    const tds = block.querySelectorAll('tr td:first-child');
+    let index = 0;
+    while (index < tds.length) {
+      const td = tds[index];
+      td.classList.add('left-heading');
+      const rowspan = td.getAttribute('rowspan');
+      if (rowspan !== null && rowspan > 1) {
+        const rowspanCount = parseInt(rowspan, 10);
+        index += rowspanCount;
+      } else {
+        index += 1;
+      }
+    }
+  }
+
   const tableRows = block.querySelectorAll('.table[data-block-name="table"] tr');
   tableRows.forEach((row) => {
     const cells = row.querySelectorAll('td');