diff --git a/CHANGELOG.md b/CHANGELOG.md
index 59cbd7b0950..e048ae4e797 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,10 @@
 - Added `external` prop to `EuiLink` ([#2442](https://github.com/elastic/eui/pull/2442))
 - Added disabled state to `EuiBadge` ([#2440](https://github.com/elastic/eui/pull/2440))
 
+**Bug fixes**
+
+- Reenabled `width` property for `EuiTable` cell components ([#2452](https://github.com/elastic/eui/pull/2452))
+
 ## [`14.6.0`](https://github.com/elastic/eui/tree/v14.6.0)
 
 - Added new updated `infraApp` and `logsApp` icons. ([#2430](https://github.com/elastic/eui/pull/2430))
diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap
index fd3b2b209d8..4ed2ccd557e 100644
--- a/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap
+++ b/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap
@@ -156,6 +156,11 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                       data-test-subj="tableHeaderCell_name_0"
                       role="columnheader"
                       scope="col"
+                      style={
+                        Object {
+                          "width": undefined,
+                        }
+                      }
                     >
                       <div
                         className="euiTableCellContent"
@@ -192,6 +197,11 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                     >
                       <td
                         className="euiTableRowCell"
+                        style={
+                          Object {
+                            "width": undefined,
+                          }
+                        }
                       >
                         <div
                           className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
@@ -230,6 +240,11 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                     >
                       <td
                         className="euiTableRowCell"
+                        style={
+                          Object {
+                            "width": undefined,
+                          }
+                        }
                       >
                         <div
                           className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
diff --git a/src/components/table/__snapshots__/table_footer_cell.test.tsx.snap b/src/components/table/__snapshots__/table_footer_cell.test.tsx.snap
index ae842e57ec1..beb5e983479 100644
--- a/src/components/table/__snapshots__/table_footer_cell.test.tsx.snap
+++ b/src/components/table/__snapshots__/table_footer_cell.test.tsx.snap
@@ -59,3 +59,71 @@ exports[`EuiTableFooterCell is rendered 1`] = `
   </div>
 </td>
 `;
+
+exports[`EuiTableFooterCell width and style accepts style attribute 1`] = `
+<td
+  class="euiTableFooterCell"
+  style="width:20%"
+>
+  <div
+    class="euiTableCellContent"
+  >
+    <span
+      class="euiTableCellContent__text"
+    >
+      Test
+    </span>
+  </div>
+</td>
+`;
+
+exports[`EuiTableFooterCell width and style accepts width attribute 1`] = `
+<td
+  class="euiTableFooterCell"
+  style="width:10%"
+>
+  <div
+    class="euiTableCellContent"
+  >
+    <span
+      class="euiTableCellContent__text"
+    >
+      Test
+    </span>
+  </div>
+</td>
+`;
+
+exports[`EuiTableFooterCell width and style accepts width attribute as number 1`] = `
+<td
+  class="euiTableFooterCell"
+  style="width:100px"
+>
+  <div
+    class="euiTableCellContent"
+  >
+    <span
+      class="euiTableCellContent__text"
+    >
+      Test
+    </span>
+  </div>
+</td>
+`;
+
+exports[`EuiTableFooterCell width and style resolves style and width attribute 1`] = `
+<td
+  class="euiTableFooterCell"
+  style="width:10%"
+>
+  <div
+    class="euiTableCellContent"
+  >
+    <span
+      class="euiTableCellContent__text"
+    >
+      Test
+    </span>
+  </div>
+</td>
+`;
diff --git a/src/components/table/__snapshots__/table_header_cell.test.tsx.snap b/src/components/table/__snapshots__/table_header_cell.test.tsx.snap
index 076815b2f1b..b6a4321e000 100644
--- a/src/components/table/__snapshots__/table_header_cell.test.tsx.snap
+++ b/src/components/table/__snapshots__/table_header_cell.test.tsx.snap
@@ -67,3 +67,79 @@ exports[`renders EuiTableHeaderCell 1`] = `
   </div>
 </th>
 `;
+
+exports[`width and style accepts style attribute 1`] = `
+<th
+  class="euiTableHeaderCell"
+  role="columnheader"
+  scope="col"
+  style="width:20%"
+>
+  <div
+    class="euiTableCellContent"
+  >
+    <span
+      class="euiTableCellContent__text"
+    >
+      Test
+    </span>
+  </div>
+</th>
+`;
+
+exports[`width and style accepts width attribute 1`] = `
+<th
+  class="euiTableHeaderCell"
+  role="columnheader"
+  scope="col"
+  style="width:10%"
+>
+  <div
+    class="euiTableCellContent"
+  >
+    <span
+      class="euiTableCellContent__text"
+    >
+      Test
+    </span>
+  </div>
+</th>
+`;
+
+exports[`width and style accepts width attribute as number 1`] = `
+<th
+  class="euiTableHeaderCell"
+  role="columnheader"
+  scope="col"
+  style="width:100px"
+>
+  <div
+    class="euiTableCellContent"
+  >
+    <span
+      class="euiTableCellContent__text"
+    >
+      Test
+    </span>
+  </div>
+</th>
+`;
+
+exports[`width and style resolves style and width attribute 1`] = `
+<th
+  class="euiTableHeaderCell"
+  role="columnheader"
+  scope="col"
+  style="width:10%"
+>
+  <div
+    class="euiTableCellContent"
+  >
+    <span
+      class="euiTableCellContent__text"
+    >
+      Test
+    </span>
+  </div>
+</th>
+`;
diff --git a/src/components/table/__snapshots__/table_header_cell_checkbox.test.tsx.snap b/src/components/table/__snapshots__/table_header_cell_checkbox.test.tsx.snap
index 4e921b9ccd6..5c52d69b4e5 100644
--- a/src/components/table/__snapshots__/table_header_cell_checkbox.test.tsx.snap
+++ b/src/components/table/__snapshots__/table_header_cell_checkbox.test.tsx.snap
@@ -12,3 +12,59 @@ exports[`EuiTableHeaderCellCheckbox is rendered 1`] = `
   />
 </th>
 `;
+
+exports[`EuiTableHeaderCellCheckbox width and style accepts style attribute 1`] = `
+<th
+  class="euiTableHeaderCellCheckbox"
+  scope="col"
+  style="width:20%"
+>
+  <div
+    class="euiTableCellContent"
+  >
+    Test
+  </div>
+</th>
+`;
+
+exports[`EuiTableHeaderCellCheckbox width and style accepts width attribute 1`] = `
+<th
+  class="euiTableHeaderCellCheckbox"
+  scope="col"
+  style="width:10%"
+>
+  <div
+    class="euiTableCellContent"
+  >
+    Test
+  </div>
+</th>
+`;
+
+exports[`EuiTableHeaderCellCheckbox width and style accepts width attribute as number 1`] = `
+<th
+  class="euiTableHeaderCellCheckbox"
+  scope="col"
+  style="width:100px"
+>
+  <div
+    class="euiTableCellContent"
+  >
+    Test
+  </div>
+</th>
+`;
+
+exports[`EuiTableHeaderCellCheckbox width and style resolves style and width attribute 1`] = `
+<th
+  class="euiTableHeaderCellCheckbox"
+  scope="col"
+  style="width:10%"
+>
+  <div
+    class="euiTableCellContent"
+  >
+    Test
+  </div>
+</th>
+`;
diff --git a/src/components/table/__snapshots__/table_row_cell.test.tsx.snap b/src/components/table/__snapshots__/table_row_cell.test.tsx.snap
index e7b5428c554..b79740fa556 100644
--- a/src/components/table/__snapshots__/table_row_cell.test.tsx.snap
+++ b/src/components/table/__snapshots__/table_row_cell.test.tsx.snap
@@ -125,3 +125,71 @@ exports[`truncateText is rendered when specified 1`] = `
   </div>
 </td>
 `;
+
+exports[`width and style accepts style attribute 1`] = `
+<td
+  class="euiTableRowCell"
+  style="width:20%"
+>
+  <div
+    class="euiTableCellContent"
+  >
+    <span
+      class="euiTableCellContent__text"
+    >
+      Test
+    </span>
+  </div>
+</td>
+`;
+
+exports[`width and style accepts width attribute 1`] = `
+<td
+  class="euiTableRowCell"
+  style="width:10%"
+>
+  <div
+    class="euiTableCellContent"
+  >
+    <span
+      class="euiTableCellContent__text"
+    >
+      Test
+    </span>
+  </div>
+</td>
+`;
+
+exports[`width and style accepts width attribute as number 1`] = `
+<td
+  class="euiTableRowCell"
+  style="width:100px"
+>
+  <div
+    class="euiTableCellContent"
+  >
+    <span
+      class="euiTableCellContent__text"
+    >
+      Test
+    </span>
+  </div>
+</td>
+`;
+
+exports[`width and style resolves style and width attribute 1`] = `
+<td
+  class="euiTableRowCell"
+  style="width:10%"
+>
+  <div
+    class="euiTableCellContent"
+  >
+    <span
+      class="euiTableCellContent__text"
+    >
+      Test
+    </span>
+  </div>
+</td>
+`;
diff --git a/src/components/table/table_footer_cell.test.tsx b/src/components/table/table_footer_cell.test.tsx
index 1e8034dd5dd..e3cfba2ec74 100644
--- a/src/components/table/table_footer_cell.test.tsx
+++ b/src/components/table/table_footer_cell.test.tsx
@@ -34,4 +34,40 @@ describe('EuiTableFooterCell', () => {
       expect(render(component)).toMatchSnapshot();
     });
   });
+
+  describe('width and style', () => {
+    test('accepts style attribute', () => {
+      const component = (
+        <EuiTableFooterCell style={{ width: '20%' }}>Test</EuiTableFooterCell>
+      );
+
+      expect(render(component)).toMatchSnapshot();
+    });
+
+    test('accepts width attribute', () => {
+      const component = (
+        <EuiTableFooterCell width="10%">Test</EuiTableFooterCell>
+      );
+
+      expect(render(component)).toMatchSnapshot();
+    });
+
+    test('accepts width attribute as number', () => {
+      const component = (
+        <EuiTableFooterCell width={100}>Test</EuiTableFooterCell>
+      );
+
+      expect(render(component)).toMatchSnapshot();
+    });
+
+    test('resolves style and width attribute', () => {
+      const component = (
+        <EuiTableFooterCell width="10%" style={{ width: '20%' }}>
+          Test
+        </EuiTableFooterCell>
+      );
+
+      expect(render(component)).toMatchSnapshot();
+    });
+  });
 });
diff --git a/src/components/table/table_footer_cell.tsx b/src/components/table/table_footer_cell.tsx
index 3917efb8243..ef090e7ea29 100644
--- a/src/components/table/table_footer_cell.tsx
+++ b/src/components/table/table_footer_cell.tsx
@@ -9,16 +9,20 @@ import {
   CENTER_ALIGNMENT,
 } from '../../services';
 
+import { resolveWidthAsStyle } from './utils';
+
 type Props = CommonProps &
   TdHTMLAttributes<HTMLTableCellElement> & {
     align?: HorizontalAlignment;
+    width?: string | number;
   };
 
 export const EuiTableFooterCell: FunctionComponent<Props> = ({
   children,
   align = LEFT_ALIGNMENT,
-  colSpan,
   className,
+  width,
+  style,
   ...rest
 }) => {
   const classes = classNames('euiTableFooterCell', className);
@@ -26,9 +30,10 @@ export const EuiTableFooterCell: FunctionComponent<Props> = ({
     'euiTableCellContent--alignRight': align === RIGHT_ALIGNMENT,
     'euiTableCellContent--alignCenter': align === CENTER_ALIGNMENT,
   });
+  const styleObj = resolveWidthAsStyle(style, width);
 
   return (
-    <td className={classes} colSpan={colSpan} {...rest}>
+    <td className={classes} style={styleObj} {...rest}>
       <div className={contentClasses}>
         <span className="euiTableCellContent__text">{children}</span>
       </div>
diff --git a/src/components/table/table_header_cell.test.tsx b/src/components/table/table_header_cell.test.tsx
index 34e8a366dc4..e5431519c35 100644
--- a/src/components/table/table_header_cell.test.tsx
+++ b/src/components/table/table_header_cell.test.tsx
@@ -33,3 +33,35 @@ describe('align', () => {
     expect(render(component)).toMatchSnapshot();
   });
 });
+
+describe('width and style', () => {
+  test('accepts style attribute', () => {
+    const component = (
+      <EuiTableHeaderCell style={{ width: '20%' }}>Test</EuiTableHeaderCell>
+    );
+
+    expect(render(component)).toMatchSnapshot();
+  });
+
+  test('accepts width attribute', () => {
+    const component = <EuiTableHeaderCell width="10%">Test</EuiTableHeaderCell>;
+
+    expect(render(component)).toMatchSnapshot();
+  });
+
+  test('accepts width attribute as number', () => {
+    const component = <EuiTableHeaderCell width={100}>Test</EuiTableHeaderCell>;
+
+    expect(render(component)).toMatchSnapshot();
+  });
+
+  test('resolves style and width attribute', () => {
+    const component = (
+      <EuiTableHeaderCell width="10%" style={{ width: '20%' }}>
+        Test
+      </EuiTableHeaderCell>
+    );
+
+    expect(render(component)).toMatchSnapshot();
+  });
+});
diff --git a/src/components/table/table_header_cell.tsx b/src/components/table/table_header_cell.tsx
index e743907d028..330cbc9bc61 100644
--- a/src/components/table/table_header_cell.tsx
+++ b/src/components/table/table_header_cell.tsx
@@ -8,6 +8,7 @@ import classNames from 'classnames';
 import { EuiScreenReaderOnly } from '../accessibility';
 import { CommonProps, NoArgCallback } from '../common';
 import { EuiIcon } from '../icon';
+import { resolveWidthAsStyle } from './utils';
 
 import {
   HorizontalAlignment,
@@ -56,6 +57,7 @@ type Props = CommonProps &
     };
     onSort?: NoArgCallback<void>;
     scope?: TableHeaderCellScope;
+    width?: string | number;
   };
 
 export const EuiTableHeaderCell: FunctionComponent<Props> = ({
@@ -73,6 +75,8 @@ export const EuiTableHeaderCell: FunctionComponent<Props> = ({
   // Soon to be deprecated for {...mobileOptions}
   isMobileHeader,
   hideForMobile,
+  style,
+  width,
   ...rest
 }) => {
   const classes = classNames('euiTableHeaderCell', className, {
@@ -85,6 +89,8 @@ export const EuiTableHeaderCell: FunctionComponent<Props> = ({
     'euiTableCellContent--alignCenter': align === CENTER_ALIGNMENT,
   });
 
+  const styleObj = resolveWidthAsStyle(style, width);
+
   if (onSort) {
     const buttonClasses = classNames('euiTableHeaderButton', {
       'euiTableHeaderButton-isSorted': isSorted,
@@ -114,6 +120,7 @@ export const EuiTableHeaderCell: FunctionComponent<Props> = ({
         role="columnheader"
         aria-sort={ariaSortValue}
         aria-live="polite"
+        style={styleObj}
         {...rest}>
         <button
           type="button"
@@ -140,7 +147,12 @@ export const EuiTableHeaderCell: FunctionComponent<Props> = ({
   }
 
   return (
-    <th className={classes} scope={scope} role="columnheader" {...rest}>
+    <th
+      className={classes}
+      scope={scope}
+      role="columnheader"
+      style={styleObj}
+      {...rest}>
       <div className={contentClasses}>
         <span className="euiTableCellContent__text">{children}</span>
       </div>
diff --git a/src/components/table/table_header_cell_checkbox.test.tsx b/src/components/table/table_header_cell_checkbox.test.tsx
index ecdf60136a3..a8732941746 100644
--- a/src/components/table/table_header_cell_checkbox.test.tsx
+++ b/src/components/table/table_header_cell_checkbox.test.tsx
@@ -10,4 +10,46 @@ describe('EuiTableHeaderCellCheckbox', () => {
 
     expect(component).toMatchSnapshot();
   });
+
+  describe('width and style', () => {
+    test('accepts style attribute', () => {
+      const component = (
+        <EuiTableHeaderCellCheckbox style={{ width: '20%' }}>
+          Test
+        </EuiTableHeaderCellCheckbox>
+      );
+
+      expect(render(component)).toMatchSnapshot();
+    });
+
+    test('accepts width attribute', () => {
+      const component = (
+        <EuiTableHeaderCellCheckbox width="10%">
+          Test
+        </EuiTableHeaderCellCheckbox>
+      );
+
+      expect(render(component)).toMatchSnapshot();
+    });
+
+    test('accepts width attribute as number', () => {
+      const component = (
+        <EuiTableHeaderCellCheckbox width={100}>
+          Test
+        </EuiTableHeaderCellCheckbox>
+      );
+
+      expect(render(component)).toMatchSnapshot();
+    });
+
+    test('resolves style and width attribute', () => {
+      const component = (
+        <EuiTableHeaderCellCheckbox width="10%" style={{ width: '20%' }}>
+          Test
+        </EuiTableHeaderCellCheckbox>
+      );
+
+      expect(render(component)).toMatchSnapshot();
+    });
+  });
 });
diff --git a/src/components/table/table_header_cell_checkbox.tsx b/src/components/table/table_header_cell_checkbox.tsx
index 7057458a25e..3be07e27609 100644
--- a/src/components/table/table_header_cell_checkbox.tsx
+++ b/src/components/table/table_header_cell_checkbox.tsx
@@ -2,6 +2,8 @@ import React, { FunctionComponent, ThHTMLAttributes } from 'react';
 import classNames from 'classnames';
 import { CommonProps } from '../common';
 
+import { resolveWidthAsStyle } from './utils';
+
 export type EuiTableHeaderCellCheckboxScope =
   | 'col'
   | 'row'
@@ -9,7 +11,7 @@ export type EuiTableHeaderCellCheckboxScope =
   | 'rowgroup';
 
 export interface EuiTableHeaderCellCheckboxProps {
-  width?: string;
+  width?: string | number;
   scope?: EuiTableHeaderCellCheckboxScope;
 }
 
@@ -17,11 +19,12 @@ export const EuiTableHeaderCellCheckbox: FunctionComponent<
   CommonProps &
     ThHTMLAttributes<HTMLTableHeaderCellElement> &
     EuiTableHeaderCellCheckboxProps
-> = ({ children, className, scope = 'col', ...rest }) => {
+> = ({ children, className, scope = 'col', style, width, ...rest }) => {
   const classes = classNames('euiTableHeaderCellCheckbox', className);
+  const styleObj = resolveWidthAsStyle(style, width);
 
   return (
-    <th className={classes} {...rest} scope={scope}>
+    <th className={classes} scope={scope} style={styleObj} {...rest}>
       <div className="euiTableCellContent">{children}</div>
     </th>
   );
diff --git a/src/components/table/table_row_cell.test.tsx b/src/components/table/table_row_cell.test.tsx
index 9023ee9cba2..bb62517e77e 100644
--- a/src/components/table/table_row_cell.test.tsx
+++ b/src/components/table/table_row_cell.test.tsx
@@ -73,3 +73,35 @@ describe("children's className", () => {
     expect(render(component)).toMatchSnapshot();
   });
 });
+
+describe('width and style', () => {
+  test('accepts style attribute', () => {
+    const component = (
+      <EuiTableRowCell style={{ width: '20%' }}>Test</EuiTableRowCell>
+    );
+
+    expect(render(component)).toMatchSnapshot();
+  });
+
+  test('accepts width attribute', () => {
+    const component = <EuiTableRowCell width="10%">Test</EuiTableRowCell>;
+
+    expect(render(component)).toMatchSnapshot();
+  });
+
+  test('accepts width attribute as number', () => {
+    const component = <EuiTableRowCell width={100}>Test</EuiTableRowCell>;
+
+    expect(render(component)).toMatchSnapshot();
+  });
+
+  test('resolves style and width attribute', () => {
+    const component = (
+      <EuiTableRowCell width="10%" style={{ width: '20%' }}>
+        Test
+      </EuiTableRowCell>
+    );
+
+    expect(render(component)).toMatchSnapshot();
+  });
+});
diff --git a/src/components/table/table_row_cell.tsx b/src/components/table/table_row_cell.tsx
index ea15929137a..856a119e2c7 100644
--- a/src/components/table/table_row_cell.tsx
+++ b/src/components/table/table_row_cell.tsx
@@ -15,6 +15,8 @@ import {
   CENTER_ALIGNMENT,
 } from '../../services';
 
+import { resolveWidthAsStyle } from './utils';
+
 interface EuiTableRowCellSharedPropsShape {
   /**
    * Horizontal alignment of the text in the cell
@@ -34,6 +36,7 @@ interface EuiTableRowCellSharedPropsShape {
    * _Should only be used for action cells_
    */
   truncateText?: boolean;
+  width?: string | number;
 }
 
 interface EuiTableRowCellMobileOptionsShape {
@@ -120,7 +123,6 @@ export const EuiTableRowCell: FunctionComponent<Props> = ({
   truncateText,
   showOnHover,
   textOnly = true,
-  colSpan,
   hasActions,
   isExpander,
   mobileOptions = {
@@ -131,6 +133,8 @@ export const EuiTableRowCell: FunctionComponent<Props> = ({
   hideForMobile,
   isMobileHeader,
   isMobileFullWidth,
+  style,
+  width,
   ...rest
 }) => {
   const cellClasses = classNames('euiTableRowCell', {
@@ -173,6 +177,8 @@ export const EuiTableRowCell: FunctionComponent<Props> = ({
     euiTableCellContent__hoverItem: showOnHover,
   });
 
+  const styleObj = resolveWidthAsStyle(style, width);
+
   function modifyChildren(children: ReactNode) {
     let modifiedChildren = children;
 
@@ -202,14 +208,14 @@ export const EuiTableRowCell: FunctionComponent<Props> = ({
     cellRender = (
       <td
         className={`${cellClasses} ${hideForMobileClasses}`}
-        colSpan={colSpan}
+        style={styleObj}
         {...rest}>
         <div className={contentClasses}>{childrenNode}</div>
       </td>
     );
   } else {
     cellRender = (
-      <td className={cellClasses} colSpan={colSpan} {...rest}>
+      <td className={cellClasses} style={styleObj} {...rest}>
         {/* Mobile-only header */}
         {(mobileOptions.header || header) && !isMobileHeader && (
           <div
diff --git a/src/components/table/utils.test.ts b/src/components/table/utils.test.ts
new file mode 100644
index 00000000000..ea0d5a85a05
--- /dev/null
+++ b/src/components/table/utils.test.ts
@@ -0,0 +1,51 @@
+import { resolveWidthAsStyle } from './utils';
+describe('resolveWidthAsStyle', () => {
+  describe('without style or width', () => {
+    it('returns empty', () => {
+      expect(resolveWidthAsStyle(undefined, undefined)).toEqual({});
+      expect(resolveWidthAsStyle({}, undefined)).toEqual({});
+    });
+  });
+  describe('with style; without width', () => {
+    it('returns style clone', () => {
+      const style = { width: '20%', color: 'red' };
+      expect(resolveWidthAsStyle(style, undefined)).toEqual(style);
+      expect(resolveWidthAsStyle({}, undefined)).toEqual({});
+    });
+  });
+  describe('without style; with width', () => {
+    it('returns style with width', () => {
+      const width = '10%';
+      const expected = { width: width };
+      expect(resolveWidthAsStyle(undefined, width)).toEqual(expected);
+      expect(resolveWidthAsStyle({}, width)).toEqual(expected);
+      expect(resolveWidthAsStyle(undefined, 100)).toEqual({ width: '100px' });
+      expect(resolveWidthAsStyle(undefined, '100')).toEqual({ width: '100px' });
+    });
+  });
+  describe('with style and width', () => {
+    const oldConsoleError = console.warn;
+    let consoleStub: jest.Mock;
+
+    beforeEach(() => {
+      console.warn = consoleStub = jest.fn();
+    });
+
+    afterEach(() => {
+      console.warn = oldConsoleError;
+    });
+    const result = {
+      width: '10%',
+      color: 'red',
+    };
+    it('returns width overriding style', () => {
+      const style = { width: '20%', color: 'red' };
+      expect(resolveWidthAsStyle(style, '10%')).toEqual(result);
+      expect(consoleStub).toBeCalled();
+    });
+    it('returns style merged with width', () => {
+      const style = { color: 'red' };
+      expect(resolveWidthAsStyle(style, '10%')).toEqual(result);
+    });
+  });
+});
diff --git a/src/components/table/utils.ts b/src/components/table/utils.ts
new file mode 100644
index 00000000000..90ec56f6bef
--- /dev/null
+++ b/src/components/table/utils.ts
@@ -0,0 +1,21 @@
+import { CSSProperties } from 'react';
+
+export const resolveWidthAsStyle = (
+  style: CSSProperties = {},
+  width?: string | number
+) => {
+  const { width: styleWidth, ...styleRest } = style;
+  let attrWidth = width;
+  if (
+    attrWidth != null &&
+    (typeof attrWidth === 'number' || !isNaN(Number(attrWidth))) // transform {number} or unitless 'number' to px string
+  ) {
+    attrWidth = `${attrWidth}px`;
+  }
+  if (styleWidth && attrWidth) {
+    console.warn(
+      'Two `width` properties were provided. Provide only one of `style.width` or `width` to avoid conflicts.'
+    );
+  }
+  return { ...styleRest, width: attrWidth || styleWidth };
+};