From 54d7ef785ff469f54e9597af0596caf518daf3c2 Mon Sep 17 00:00:00 2001
From: liaoxuezhi <2betop.cn@gmail.com>
Date: Wed, 6 Dec 2023 16:21:53 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20chrome=20=E4=BD=8E?=
 =?UTF-8?q?=E7=89=88=E6=9C=AC=E5=88=97=E8=AE=BE=E7=BD=AE=E5=AE=BD=E5=BA=A6?=
 =?UTF-8?q?=E6=97=A0=E6=95=88=E7=9A=84=E9=97=AE=E9=A2=98=20(#9026)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/amis-core/src/utils/browser.ts       |  4 ++
 packages/amis-core/src/utils/index.ts         |  1 +
 .../amis/src/renderers/Table/ColGroup.tsx     | 46 ++++++++++++++++++-
 3 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 packages/amis-core/src/utils/browser.ts

diff --git a/packages/amis-core/src/utils/browser.ts b/packages/amis-core/src/utils/browser.ts
new file mode 100644
index 000000000..5cf930432
--- /dev/null
+++ b/packages/amis-core/src/utils/browser.ts
@@ -0,0 +1,4 @@
+export const chromeVersion = (function getChromeVersion() {
+  const raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./);
+  return raw ? parseInt(raw[2], 10) : false;
+})();
diff --git a/packages/amis-core/src/utils/index.ts b/packages/amis-core/src/utils/index.ts
index d7cee9ee3..4f06179a9 100644
--- a/packages/amis-core/src/utils/index.ts
+++ b/packages/amis-core/src/utils/index.ts
@@ -1,6 +1,7 @@
 export * from './api';
 export * from './attachmentAdpator';
 export * from './autobind';
+export * from './browser';
 export * from './ColorScale';
 export * from './columnsSplit';
 export * from './dataMapping';
diff --git a/packages/amis/src/renderers/Table/ColGroup.tsx b/packages/amis/src/renderers/Table/ColGroup.tsx
index c745af55c..86b480f8a 100644
--- a/packages/amis/src/renderers/Table/ColGroup.tsx
+++ b/packages/amis/src/renderers/Table/ColGroup.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import type {IColumn, ITableStore} from 'amis-core';
+import {chromeVersion, type IColumn, type ITableStore} from 'amis-core';
 import {observer} from 'mobx-react';
 
 export function ColGroup({
@@ -33,6 +33,50 @@ export function ColGroup({
     };
   }, []);
 
+  // 解决 chrome 91 以下版本的设置 colgroup>col 的 width 属性无效的问题
+  // 低版本同时设置 thead>th
+  // The problem is min-width CSS property.
+  // Before Chrome 91, min-width was ignored on COL elements. 91 no longer ignores it.
+  if (typeof chromeVersion === 'number' && chromeVersion < 91) {
+    React.useEffect(() => {
+      if (domRef.current) {
+        const ths = [].slice.call(
+          domRef.current.parentElement!.querySelectorAll(
+            ':scope > thead > tr > th[data-index]'
+          )
+        );
+        ths.forEach((th: HTMLTableCellElement) => {
+          const index = parseInt(th.getAttribute('data-index')!, 10);
+          const column = store.columns[index];
+
+          let style = '';
+          let width: any = -1;
+
+          if (store.columnWidthReady && column.width) {
+            width = column.width;
+          } else if (column.pristine.width) {
+            width = column.pristine.width;
+          }
+
+          if (width === -1) {
+            return;
+          }
+          style += `width: ${
+            // 有可能是百分比
+            typeof width === 'number' ? `${width}px` : width
+          };`;
+
+          if (store.tableLayout === 'auto') {
+            style += `min-width: ${
+              typeof width === 'number' ? `${width}px` : width
+            };`;
+          }
+          th.style.cssText = style;
+        });
+      }
+    }, columns.map(column => column.width).concat(store.columnWidthReady as any));
+  }
+
   return (
     <colgroup ref={domRef}>
       {columns.map(column => {