From 228daf6550f9f09d51e1951074cb9e148d5d1e24 Mon Sep 17 00:00:00 2001
From: Alexey Sudilovskiy <sudilovskiy@yandex-team.ru>
Date: Wed, 19 Jul 2023 15:40:09 +0200
Subject: [PATCH 1/2] refactor: do not set `width` to cell

---
 src/components/Table/Table.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index a462982e3..9fd099639 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -351,7 +351,7 @@ export class Table<I extends TableDataItem = Record<string, string>> extends Rea
                             <th
                                 key={id}
                                 ref={this.state.columnHeaderRefs[index]}
-                                style={columnsStyles[index]}
+                                style={this.getCellStyles(columnsStyles[index])}
                                 className={b(
                                     'cell',
                                     {
@@ -445,7 +445,7 @@ export class Table<I extends TableDataItem = Record<string, string>> extends Rea
                     return (
                         <td
                             key={id}
-                            style={columnsStyles[colIndex]}
+                            style={this.getCellStyles(columnsStyles[colIndex])}
                             className={b(
                                 'cell',
                                 {
@@ -535,6 +535,13 @@ export class Table<I extends TableDataItem = Record<string, string>> extends Rea
         return style;
     }
 
+    private getCellStyles({
+        width: _width,
+        ...styles
+    }: React.CSSProperties): React.CSSProperties | undefined {
+        return Object.keys(styles).length ? styles : undefined;
+    }
+
     private handleScrollContainerMouseenter = () => {
         this.setState({activeScrollElement: 'scrollContainer'});
     };

From 31c5233072d97b4f8aafdf493df553621ddfbc13 Mon Sep 17 00:00:00 2001
From: Alexey Sudilovskiy <sudilovskiy@yandex-team.ru>
Date: Wed, 19 Jul 2023 15:44:57 +0200
Subject: [PATCH 2/2] feat(Table): use `<colgroup/>` to set cells width

---
 src/components/Table/Table.tsx | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 9fd099639..0eb6b2d69 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -336,6 +336,23 @@ export class Table<I extends TableDataItem = Record<string, string>> extends Rea
         );
     }
 
+    private renderColgroup() {
+        const {columns} = this.props;
+        const {columnsStyles} = this.state;
+
+        if (!columnsStyles.length) {
+            return null;
+        }
+
+        return (
+            <colgroup>
+                {columnsStyles.map(({width}, index) => (
+                    <col style={{width}} key={columns[index].id} />
+                ))}
+            </colgroup>
+        );
+    }
+
     private renderHead() {
         const {columns, edgePadding, wordWrap} = this.props;
         const {columnsStyles} = this.state;
@@ -386,6 +403,7 @@ export class Table<I extends TableDataItem = Record<string, string>> extends Rea
     private renderTable() {
         return (
             <table ref={this.tableRef} className={b('table')}>
+                {this.renderColgroup()}
                 {this.renderHead()}
                 {this.renderBody()}
             </table>