From a3c96c47c8d59b10ea7fe1367e4ce43d4fa0ac0a Mon Sep 17 00:00:00 2001
From: Armaan Gupta <armaang@Armaans-MacBook-Pro.local>
Date: Tue, 21 Jul 2026 14:40:48 +0530
Subject: [PATCH] made the preview and runtime same for col width property

---
 .../components/form/table/v1/table/table.html | 63 ++++++-------------
 1 file changed, 20 insertions(+), 43 deletions(-)

diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/table/v1/table/table.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/table/v1/table/table.html
index 310f9a9c52..0f6b831eb5 100644
--- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/table/v1/table/table.html
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/table/v1/table/table.html
@@ -37,50 +37,27 @@
     <div data-sly-call="${shortDescription.shortDescription @componentId=table.id, shortDescriptionVisible=table.tooltipVisible, shortDescription=table.tooltip, bemBlock='cmp-adaptiveform-table'}" data-sly-unwrap></div>
     <div data-sly-call="${longDescription.longDescription @componentId=table.id, longDescription=table.description, bemBlock='cmp-adaptiveform-table'}" data-sly-unwrap></div>
 
-    <!--/* EDIT MODE: column widths not applied; children render their own <tr> with data-cq-data-path for the overlay. */-->
-    <sly data-sly-test="${wcmmode.edit}">
-        <table class="cmp-adaptiveform-table__widget"
-               aria-label="${table.label.value @ context='attribute'}">
-            <thead class="cmp-adaptiveform-table__head">
-                <sly data-sly-list.child="${resource.listChildren}">
-                    <sly data-sly-test="${child.resourceType == 'core/fd/components/form/tableheader/v1/tableheader'}">
-                        <sly data-sly-resource="${child @ decoration=false}"></sly>
-                    </sly>
+    <table class="cmp-adaptiveform-table__widget"
+           aria-label="${table.label.value @ context='attribute'}"
+           data-sly-attribute.style="${properties.columnWidth ? 'table-layout: fixed; width: 100%' : false}">
+        <sly data-sly-test="${table.columnWidthsConfigured}">
+            <colgroup data-sly-list.colStyle="${table.columnWidthColStyles}">
+                <col style="${colStyle @ context='styleString'}" />
+            </colgroup>
+        </sly>
+        <thead class="cmp-adaptiveform-table__head">
+            <sly data-sly-list.child="${resource.listChildren}">
+                <sly data-sly-test="${child.resourceType == 'core/fd/components/form/tableheader/v1/tableheader'}">
+                    <sly data-sly-resource="${child @ decoration=false}"></sly>
                 </sly>
-            </thead>
-            <tbody class="cmp-adaptiveform-table__body">
-                <sly data-sly-list.child="${resource.listChildren}">
-                    <sly data-sly-test="${child.resourceType == 'core/fd/components/form/tablerow/v1/tablerow'}">
-                        <sly data-sly-resource="${child @ decoration=false}"></sly>
-                    </sly>
-                </sly>
-            </tbody>
-        </table>
-    </sly>
-    <!--/* PUBLISH MODE: column widths applied via colgroup; proper semantic table for accessibility. */-->
-    <sly data-sly-test="${!wcmmode.edit}">
-        <table class="cmp-adaptiveform-table__widget"
-               aria-label="${table.label.value @ context='attribute'}"
-               data-sly-attribute.style="${properties.columnWidth ? 'table-layout: fixed; width: 100%' : false}">
-            <sly data-sly-test="${table.columnWidthsConfigured}">
-                <colgroup data-sly-list.colStyle="${table.columnWidthColStyles}">
-                    <col style="${colStyle @ context='styleString'}" />
-                </colgroup>
             </sly>
-            <thead class="cmp-adaptiveform-table__head">
-                <sly data-sly-list.child="${resource.listChildren}">
-                    <sly data-sly-test="${child.resourceType == 'core/fd/components/form/tableheader/v1/tableheader'}">
-                        <sly data-sly-resource="${child @ decoration=false}"></sly>
-                    </sly>
-                </sly>
-            </thead>
-            <tbody class="cmp-adaptiveform-table__body">
-                <sly data-sly-list.child="${resource.listChildren}">
-                    <sly data-sly-test="${child.resourceType == 'core/fd/components/form/tablerow/v1/tablerow'}">
-                        <sly data-sly-resource="${child @ decoration=false}"></sly>
-                    </sly>
+        </thead>
+        <tbody class="cmp-adaptiveform-table__body">
+            <sly data-sly-list.child="${resource.listChildren}">
+                <sly data-sly-test="${child.resourceType == 'core/fd/components/form/tablerow/v1/tablerow'}">
+                    <sly data-sly-resource="${child @ decoration=false}"></sly>
                 </sly>
-            </tbody>
-        </table>
-    </sly>
+            </sly>
+        </tbody>
+    </table>
 </div>