diff --git a/src/BootstrapBlazor/Components/Table/Table.razor b/src/BootstrapBlazor/Components/Table/Table.razor
index 5b6ef0c9ba9..32f467c84a0 100644
--- a/src/BootstrapBlazor/Components/Table/Table.razor
+++ b/src/BootstrapBlazor/Components/Table/Table.razor
@@ -87,9 +87,8 @@
 
 @code {
     RenderFragment RenderFixTableHeader =>
-        @<div class="table-fixed-header">
+        @<div class="@FixedHeaderClassString">
             <table class="@TableClassName" style="@GetTableStyleString(true)">
-                @RenderColGroup(true)
                 @RenderHeader(true)
             </table>
         </div>;
@@ -101,11 +100,14 @@
 
     RenderFragment<bool> RenderTable => hasHeader =>
         @<table class="@TableClassName" style="@GetTableStyleString(hasHeader)">
-            @RenderColGroup(false)
             @if (hasHeader)
             {
                 @RenderHeader(false)
             }
+            else
+            {
+                @RenderSizingHeader(false)
+            }
             <tbody>
                 @if (ScrollMode == ScrollMode.Virtual)
                 {
@@ -226,50 +228,56 @@
             }
         </table>;
 
-    RenderFragment<bool> RenderColGroup => hasScroll =>
-        @<colgroup>
+    RenderFragment<bool> RenderSizingHeader => hasScroll =>
+        @<thead class="table-sizing-header" aria-hidden="true">
+            @RenderSizingRow(hasScroll)
+        </thead>;
+
+    RenderFragment<bool> RenderSizingRow => hasScroll =>
+        @<tr class="table-sizing-row" data-bb-sizing-row="true" aria-hidden="true">
             @if (ShowDetails())
             {
-                <col style="@GetColWidthString(DetailColumnWidth)" />
+                <th style="@GetColumnWidthStyleString(DetailColumnWidth)"></th>
             }
             @if (IsMultipleSelect)
             {
-                <col style="@GetColWidthString(MultiColumnWidth)" />
+                <th style="@GetColumnWidthStyleString(MultiColumnWidth)"></th>
             }
             @if (ShowLineNo)
             {
-                <col style="@GetColWidthString(LineNoColumnWidth)" />
+                <th style="@GetColumnWidthStyleString(LineNoColumnWidth)"></th>
             }
             @if (ShowExtendButtons && IsExtendButtonsInRowHeader)
             {
-                <col style="@GetColWidthString(ExtendButtonColumnWidth)" />
+                <th style="@GetColumnWidthStyleString(ExtendButtonColumnWidth)"></th>
             }
             @foreach (var col in _tableColumnStates)
             {
                 if (col.Visible)
                 {
-                    <col style="@GetColWidthString(col.Width)" />
+                    <th data-bb-field="@col.Name" style="@GetColumnWidthStyleString(col.Width)"></th>
                 }
             }
             @if (ShowExtendButtons && !IsExtendButtonsInRowHeader)
             {
-                <col style="@GetColWidthString(ExtendButtonColumnWidth)" />
+                <th style="@GetColumnWidthStyleString(ExtendButtonColumnWidth)"></th>
             }
             @if (hasScroll)
             {
-                <col style="@ScrollWidthString" />
+                <th style="@GetColumnWidthStyleString(ActualScrollWidth)"></th>
             }
-        </colgroup>;
+        </tr>;
 
     RenderFragment<bool> RenderHeader => hasScroll =>
         @<thead class="@HeaderClass">
             @if (MultiHeaderTemplate != null)
             {
+                @RenderSizingRow(hasScroll)
                 @MultiHeaderTemplate
             }
             @if (GetShowHeader())
             {
-                <tr>
+                <tr data-bb-header-row="true">
                     @if (ShowDetails())
                     {
                         <th class="@DetailColumnClassString" style="@DetailColumnStyleString">
@@ -380,9 +388,7 @@
                     }
                     @if (hasScroll)
                     {
-                        <th class="fixed-scroll">
-                            <div class="table-cell"><span>&nbsp;</span></div>
-                        </th>
+                        <th class="fixed-scroll" style="@ScrollColumnStyleString"></th>
                     }
                 </tr>
             }
@@ -391,25 +397,25 @@
                 <tr class="filter-header">
                     @if (ShowDetails())
                     {
-                        <th>
+                        <th class="@DetailColumnClassString" style="@DetailColumnStyleString">
                             <div class="table-cell">&nbsp;</div>
                         </th>
                     }
                     @if (IsMultipleSelect)
                     {
-                        <th>
+                        <th class="@MultiColumnClassString" style="@MultiColumnStyleString">
                             <div class="table-cell">&nbsp;</div>
                         </th>
                     }
                     @if (ShowLineNo)
                     {
-                        <th>
+                        <th class="@LineNoColumnClassString" style="@LineNoColumnStyleString">
                             <div class="table-cell">&nbsp;</div>
                         </th>
                     }
                     @if (ShowExtendButtons && IsExtendButtonsInRowHeader)
                     {
-                        <th class="@ExtendButtonsColumnClass" style="@GetFixedExtendButtonsColumnStyleString(CalcMargin())">
+                        <th class="@ExtendButtonsColumnClass" style="@GetFixedExtendButtonsStyleString(CalcMargin())">
                             <div class="table-cell">&nbsp;</div>
                         </th>
                     }
@@ -429,15 +435,13 @@
                     }
                     @if (ShowExtendButtons && !IsExtendButtonsInRowHeader)
                     {
-                        <th class="@ExtendButtonsColumnClass" style="@GetFixedExtendButtonsColumnStyleString(ActualScrollWidth)">
+                        <th class="@ExtendButtonsColumnClass" style="@GetFixedExtendButtonsStyleString(ActualScrollWidth)">
                             <div class="table-cell">&nbsp;</div>
                         </th>
                     }
                     @if (hasScroll)
                     {
-                        <th class="fixed-scroll">
-                            <div class="table-cell"><span>&nbsp;</span></div>
-                        </th>
+                        <th class="fixed-scroll" style="@ScrollColumnStyleString"></th>
                     }
                 </tr>
             }
@@ -454,7 +458,7 @@
                          OnDoubleClick="() => DoubleClickRow(item)">
             @if (ShowDetails())
             {
-                <td class="@DetailColumnClassString" style="@DetailColumnStyleString">
+                <td class="@DetailColumnClassString" style="@DetailColumnFixedStyleString">
                     <div class="@GetDetailBarClassString(item)">
                         @if (ShowDetailRow == null || ShowDetailRow(item))
                         {
@@ -466,7 +470,7 @@
             }
             @if (IsMultipleSelect)
             {
-                <td class="@MultiColumnClassString" style="@MultiColumnStyleString">
+                <td class="@MultiColumnClassString" style="@MultiColumnFixedStyleString">
                     <div class="table-cell">
                         @if (GetShowRowCheckbox(item))
                         {
@@ -479,7 +483,7 @@
             }
             @if (ShowLineNo)
             {
-                <td class="@LineNoColumnClassString" style="@LineNoColumnStyleString">
+                <td class="@LineNoColumnClassString" style="@LineNoColumnFixedStyleString">
                     <div class="@LineCellClassString">@GetLineNo(item)</div>
                 </td>
             }
@@ -622,7 +626,7 @@
         </Button>;
 
     RenderFragment RenderExtendButtonsHeader =>
-        @<th class="@ExtendButtonsColumnClass" style="@GetFixedExtendButtonsColumnStyleString(ActualScrollWidth)">
+        @<th class="@ExtendButtonsColumnClass" style="@GetFixedExtendButtonsStyleString(ActualScrollWidth)">
             <div class="@ExtendButtonsCellClassString">
                 @ColumnButtonTemplateHeaderText
             </div>
diff --git a/src/BootstrapBlazor/Components/Table/Table.razor.Sort.cs b/src/BootstrapBlazor/Components/Table/Table.razor.Sort.cs
index c3f95ebc3f3..f50089bd072 100644
--- a/src/BootstrapBlazor/Components/Table/Table.razor.Sort.cs
+++ b/src/BootstrapBlazor/Components/Table/Table.razor.Sort.cs
@@ -138,7 +138,7 @@ protected Func<Task> OnClickHeader(ITableColumn col) => async () =>
 
     private string? LineNoColumnClassString => CssBuilder.Default()
         .AddClass("fixed", FixedLineNoColumn)
-        .AddClass("fr", IsLastLineNoColumn())
+        .AddClass("fr", IsLastFixedLineNoColumn())
         .Build();
 
     private int LineNoColumnLeft()
@@ -175,11 +175,17 @@ private int MultipleSelectColumnLeft()
 
     private bool GetFixedLineNoColumn => FixedLineNoColumn && ShowLineNo;
 
-    private string? DetailColumnStyleString => GetFixedDetailRowHeaderColumn ? "left: 0;" : null;
+    private string? DetailColumnFixedStyleString => GetFixedDetailRowHeaderColumn ? "left: 0;" : null;
 
-    private string? LineNoColumnStyleString => GetFixedLineNoColumn ? $"left: {LineNoColumnLeft()}px;" : null;
+    private string? DetailColumnStyleString => GetNonDataColumnStyleString(DetailColumnFixedStyleString, DetailColumnWidth);
 
-    private string? MultiColumnStyleString => GetFixedMultipleSelectColumn ? $"left: {MultipleSelectColumnLeft()}px;" : null;
+    private string? LineNoColumnFixedStyleString => GetFixedLineNoColumn ? $"left: {LineNoColumnLeft()}px;" : null;
+
+    private string? LineNoColumnStyleString => GetNonDataColumnStyleString(LineNoColumnFixedStyleString, LineNoColumnWidth);
+
+    private string? MultiColumnFixedStyleString => GetFixedMultipleSelectColumn ? $"left: {MultipleSelectColumnLeft()}px;" : null;
+
+    private string? MultiColumnStyleString => GetNonDataColumnStyleString(MultiColumnFixedStyleString, MultiColumnWidth);
 
     private int MultiColumnWidth => ShowCheckboxText ? ShowCheckboxTextColumnWidth :
         TableSize == TableSize.Normal
@@ -205,7 +211,7 @@ private int MultipleSelectColumnLeft()
     /// </summary>
     protected string? FixedExtendButtonsColumnClassString => CssBuilder.Default("table-column-button")
         .AddClass("fixed", FixedExtendButtonsColumn)
-        .AddClass("fixed-right", !IsExtendButtonsInRowHeader)
+        .AddClass("fixed-right", FixedExtendButtonsColumn && !IsExtendButtonsInRowHeader)
         .AddClass("fr", IsLastExtendButtonColumn())
         .AddClass("fl", IsFirstExtendButtonColumn())
         .Build();
@@ -216,7 +222,7 @@ private int MultipleSelectColumnLeft()
     /// </summary>
     protected string? ExtendButtonsColumnClass => CssBuilder.Default()
         .AddClass("fixed", FixedExtendButtonsColumn)
-        .AddClass("fixed-right", !IsExtendButtonsInRowHeader)
+        .AddClass("fixed-right", FixedExtendButtonsColumn && !IsExtendButtonsInRowHeader)
         .AddClass("fr", IsLastExtendButtonColumn())
         .AddClass("fl", IsFirstExtendButtonColumn())
         .Build();
@@ -230,13 +236,13 @@ private int MultipleSelectColumnLeft()
         .AddClass($"left: {GetExtendButtonsColumnLeftMargin()}px;", FixedExtendButtonsColumn && IsExtendButtonsInRowHeader)
         .Build();
 
-    private bool IsLastDetailColumn() => !GetFixedMultipleSelectColumn && !GetFixedLineNoColumn && IsNotFixedColumn();
+    private bool IsLastDetailColumn() => !GetFixedMultipleSelectColumn && !GetFixedLineNoColumn && HasNoFixedColumnAfterLeadingAuxiliaryColumns();
 
-    private bool IsLastMultiColumn() => !GetFixedLineNoColumn && IsNotFixedColumn();
+    private bool IsLastMultiColumn() => !GetFixedLineNoColumn && HasNoFixedColumnAfterLeadingAuxiliaryColumns();
 
-    private bool IsLastLineNoColumn() => IsNotFixedColumn();
+    private bool IsLastFixedLineNoColumn() => GetFixedLineNoColumn && HasNoFixedColumnAfterLeadingAuxiliaryColumns();
 
-    private bool IsNotFixedColumn() => !(FixedExtendButtonsColumn && IsExtendButtonsInRowHeader) && !(GetVisibleColumns().FirstOrDefault()?.Fixed ?? false);
+    private bool HasNoFixedColumnAfterLeadingAuxiliaryColumns() => !(FixedExtendButtonsColumn && IsExtendButtonsInRowHeader) && !(GetVisibleColumns().FirstOrDefault()?.Fixed ?? false);
 
     private ConcurrentDictionary<ITableColumn, bool> LastFixedColumnCache { get; } = new(ReferenceEqualityComparer.Instance);
 
@@ -252,7 +258,7 @@ private bool IsLastColumn(ITableColumn col) => LastFixedColumnCache.GetOrAdd(col
         return ret;
     });
 
-    private bool IsLastExtendButtonColumn() => IsExtendButtonsInRowHeader && !GetVisibleColumns().Any(i => i.Fixed);
+    private bool IsLastExtendButtonColumn() => FixedExtendButtonsColumn && IsExtendButtonsInRowHeader && !GetVisibleColumns().Any(i => i.Fixed && !IsFixRight(i));
 
     private ConcurrentDictionary<ITableColumn, bool> FirstFixedColumnCache { get; } = new(ReferenceEqualityComparer.Instance);
 
@@ -271,20 +277,20 @@ private bool IsFirstColumn(ITableColumn col) => FirstFixedColumnCache.GetOrAdd(c
         return ret;
     });
 
-    private bool IsFirstExtendButtonColumn() => !IsExtendButtonsInRowHeader && !GetVisibleColumns().Any(i => i.Fixed);
+    private bool IsFirstExtendButtonColumn() => FixedExtendButtonsColumn && !IsExtendButtonsInRowHeader && !GetVisibleColumns().Any(i => i.Fixed && IsFixRight(i));
 
     private int GetExtendButtonsColumnLeftMargin()
     {
         var width = 0;
-        if (ShowDetails())
+        if (GetFixedDetailRowHeaderColumn)
         {
             width += DetailColumnWidth;
         }
-        if (ShowLineNo)
+        if (GetFixedLineNoColumn)
         {
             width += LineNoColumnWidth;
         }
-        if (FixedMultipleColumn)
+        if (GetFixedMultipleSelectColumn)
         {
             width += MultiColumnWidth;
         }
@@ -373,6 +379,10 @@ string GetFixedHeaderStyleString() => IsFixedHeader
         {
             width += LineNoColumnWidth;
         }
+        if (ShowExtendButtons && FixedExtendButtonsColumn && IsExtendButtonsInRowHeader)
+        {
+            width += ExtendButtonColumnWidth;
+        }
         while (index > start)
         {
             var column = columns[start++];
@@ -393,7 +403,7 @@ string GetFixedHeaderStyleString() => IsFixedHeader
             var column = columns[i];
             width += GetFixedColumnWidth(column);
         }
-        if (ShowExtendButtons && FixedExtendButtonsColumn)
+        if (ShowExtendButtons && FixedExtendButtonsColumn && !IsExtendButtonsInRowHeader)
         {
             width += ExtendButtonColumnWidth;
         }
diff --git a/src/BootstrapBlazor/Components/Table/Table.razor.cs b/src/BootstrapBlazor/Components/Table/Table.razor.cs
index 6ce02dd3986..b9639877335 100644
--- a/src/BootstrapBlazor/Components/Table/Table.razor.cs
+++ b/src/BootstrapBlazor/Components/Table/Table.razor.cs
@@ -100,6 +100,12 @@ public partial class Table<TItem> : ITable, IModelEqualityComparer<TItem> where
         .AddClass("table-draggable", AllowDragColumn)
         .Build();
 
+    private string? FixedHeaderClassString => CssBuilder.Default("table-fixed-header")
+        .AddClass("is-width-syncing", HasAutomaticColumnWidth)
+        .Build();
+
+    private bool HasAutomaticColumnWidth => _tableColumnStates.Any(x => x.Visible && x.Width is null);
+
     /// <summary>
     /// <para lang="zh">获得 wrapper 样式表集合</para>
     /// <para lang="en">Get wrapper CSS Class</para>
@@ -210,16 +216,43 @@ private string GetSortTooltip(ITableColumn col) => SortName != col.GetFieldName(
 
     private string PageInfoLabelString => Localizer[nameof(PageInfoText), PageStartIndex, (PageIndex - 1) * _pageItems + Rows.Count, TotalCount];
 
-    private static string? GetColWidthString(int? width) => (width.HasValue && width.Value > 0) ? $"width: {width.Value}px;" : null;
-
     private string? GetHeaderStyleString(ITableColumn col, int margin = 0)
     {
         var fixedStyle = GetFixedCellStyleString(col, margin);
-        var widthStyle = col.Width is > 0
+        var widthStyle = GetColumnWidthStyleString(col);
+        if (fixedStyle == null)
+        {
+            return widthStyle;
+        }
+
+        return widthStyle == null ? fixedStyle : $"{fixedStyle} {widthStyle}";
+    }
+
+    private string? GetColumnWidthStyleString(ITableColumn col)
+    {
+        var columnState = _tableColumnStateCache.Columns.FirstOrDefault(x => x.Name == col.GetFieldName());
+        var width = columnState?.Width ?? col.Width;
+        return GetColumnWidthStyleString(width);
+    }
+
+    private string? GetColumnWidthStyleString(int? width)
+    {
+        return width is > 0
             ? AllowResizing
-                ? $"width: {col.Width}px;"
-                : $"width: {col.Width}px; min-width: {col.Width}px;"
+                ? $"width: {width}px;"
+                : $"width: {width}px; min-width: {width}px;"
             : null;
+    }
+
+    private string? GetFixedExtendButtonsStyleString(int margin = 0)
+    {
+        var fixedStyle = GetFixedExtendButtonsColumnStyleString(margin);
+        return GetNonDataColumnStyleString(fixedStyle, ExtendButtonColumnWidth);
+    }
+
+    private string? GetNonDataColumnStyleString(string? fixedStyle, int width)
+    {
+        var widthStyle = GetColumnWidthStyleString(width);
         if (fixedStyle == null)
         {
             return widthStyle;
@@ -228,6 +261,8 @@ private string GetSortTooltip(ITableColumn col) => SortName != col.GetFieldName(
         return widthStyle == null ? fixedStyle : $"{fixedStyle} {widthStyle}";
     }
 
+    private string ScrollColumnStyleString => $"width: {ActualScrollWidth}px; min-width: {ActualScrollWidth}px; max-width: {ActualScrollWidth}px;";
+
     /// <summary>
     /// <para lang="zh">获得/设置 滚动条宽度 默认 null 未设置使用 <see cref="ScrollOptions"/> 配置类中的 <see cref="ScrollOptions.ScrollWidth"/></para>
     /// <para lang="en">Gets or sets Scroll Width. Default null (Use <see cref="ScrollOptions.ScrollWidth"/>)</para>
@@ -263,8 +298,6 @@ private string GetSortTooltip(ITableColumn col) => SortName != col.GetFieldName(
     //[Parameter]
     //public Func<TItem, object?>? OnGetRowKey { get; set; }
 
-    private string ScrollWidthString => $"width: {ActualScrollWidth}px;";
-
     private string? GetScrollStyleString(bool condition) => condition
         ? $"--bb-scroll-width: {ActualScrollWidth}px; --bb-scroll-hover-width: {ActualScrollHoverWidth}px;"
         : null;
@@ -1603,14 +1636,46 @@ private async Task OnTableRenderAsync(bool firstRender)
 
     private string? GetTableStyleString(bool hasHeader)
     {
+        if (HasAutomaticColumnWidth)
+        {
+            return IsFixedHeader && hasHeader
+                ? $"width: calc(100% + {ActualScrollWidth}px);"
+                : null;
+        }
+
         if (_tableColumnStateCache.TableWidth <= 0)
         {
             return null;
         }
 
-        // 计算实际宽度
-        var width = _tableColumnStateCache.TableWidth;
-        var tableWidth = hasHeader ? width : width - ActualScrollWidth;
+        var tableWidth = _tableColumnStateCache.Columns
+            .Where(x => x.Visible)
+            .Sum(x => x.Width ?? 0);
+
+        if (ShowDetails())
+        {
+            tableWidth += DetailColumnWidth;
+        }
+
+        if (IsMultipleSelect)
+        {
+            tableWidth += MultiColumnWidth;
+        }
+
+        if (ShowLineNo)
+        {
+            tableWidth += LineNoColumnWidth;
+        }
+
+        if (ShowExtendButtons)
+        {
+            tableWidth += ExtendButtonColumnWidth;
+        }
+
+        if (IsFixedHeader && hasHeader)
+        {
+            tableWidth += ActualScrollWidth;
+        }
 
         return $"width: {tableWidth}px;";
     }
@@ -2171,6 +2236,11 @@ private void UpdateTableColumnState(TableColumnClientStatus columnState)
             if (colState != null)
             {
                 item.Width = colState.Width;
+                var column = _tableColumnStates.Find(i => i.Name == item.Name);
+                if (column != null)
+                {
+                    column.Width = colState.Width;
+                }
             }
         }
         _tableColumnStateCache.TableWidth = columnState.TableWidth;
diff --git a/src/BootstrapBlazor/Components/Table/Table.razor.js b/src/BootstrapBlazor/Components/Table/Table.razor.js
index a257c1fd4d4..4c79566ebea 100644
--- a/src/BootstrapBlazor/Components/Table/Table.razor.js
+++ b/src/BootstrapBlazor/Components/Table/Table.razor.js
@@ -25,6 +25,7 @@ export async function reset(id) {
     if (table === null) {
         return;
     }
+    let columnSizeInitialized = false;
 
     if (table.minWidthObserver) {
         table.minWidthObserver.disconnect();
@@ -55,6 +56,10 @@ export async function reset(id) {
             table.tables.push(table.thead.firstElementChild)
             table.tables.push(table.body.firstElementChild)
             table.scrollWidth = parseFloat(table.body.style.getPropertyValue('--bb-scroll-width'));
+            if (isVisible(table.el)) {
+                setColSize(table, table.options);
+                columnSizeInitialized = true;
+            }
             await fixHeader(table);
 
             EventHandler.on(table.body, 'scroll', () => {
@@ -115,7 +120,7 @@ export async function reset(id) {
         return;
     }
 
-    if (table.thead) {
+    if (table.thead && !columnSizeInitialized) {
         setColSize(table, table.options);
     }
 }
@@ -209,6 +214,9 @@ const check = table => {
             cancelAnimationFrame(table.loopCheckHeightHandler);
             delete table.loopCheckHeightHandler;
         }
+        if (table.thead) {
+            setColSize(table, table.options);
+        }
     }
 };
 
@@ -467,11 +475,13 @@ const setResizeListener = table => {
     }
 
     let colWidth = 0
-    let tableWidth = 0
+    let colMinWidth = 5
+    let columnWidths = []
+    let tableColumnWidths = []
     let colIndex = 0
     let originalX = 0
 
-    const columns = [...table.tables[0].querySelectorAll('.col-resizer')]
+    const columns = [...table.tables[0].querySelectorAll('[data-bb-header-row] .col-resizer')]
     columns.forEach(col => {
         table.columns.push(col)
         EventHandler.on(col, 'click', e => e.stopPropagation());
@@ -484,87 +494,99 @@ const setResizeListener = table => {
         setColumnResizingListen(table, col);
         drag(col,
             e => {
-                stopAutoColumnWidth(table);
                 colIndex = eff(col, true)
+                freezeAutoColumnWidths(table);
                 const tableEl = col.closest('table')
-                const currentCol = tableEl.querySelectorAll('colgroup col')[colIndex]
-                const width = currentCol.style.width
-                if (width) {
-                    colWidth = parseInt(width)
+                const currentCell = getColumnWidthCell(tableEl, colIndex)
+                const width = currentCell?.style.width
+                const th = getColumnHeader(col);
+                const isFixedLayout = getComputedStyle(tableEl).tableLayout === 'fixed';
+                if (isFixedLayout) {
+                    colWidth = width ? parseFloat(width) : getResizableColumnWidth(col);
+                    colMinWidth = Math.max(table.options.columnMinWidth || 0, 5);
                 }
                 else {
                     colWidth = getResizableColumnWidth(col);
+                    colMinWidth = Math.max(
+                        getCellWidth(th) + getHeaderIconsWidth(th),
+                        getColumnMaxCellWidth(table, colIndex),
+                        table.options.columnMinWidth || 0
+                    ) | 0;
                 }
-                tableWidth = getWidth(tableEl);
+                tableColumnWidths = table.tables.map(getColumnWidths);
+                columnWidths = tableColumnWidths[0];
                 originalX = e.clientX ?? e.touches[0].clientX
             },
             e => {
                 const eventX = e.clientX ?? e.changedTouches[0].clientX
                 const marginX = eventX - originalX
-                table.tables.forEach(t => {
-                    const group = [...t.children].find(i => i.nodeName === 'COLGROUP')
-                    let calcColWidth = colWidth + marginX;
-                    if (calcColWidth < 5) {
-                        calcColWidth = 5;
-                    }
-                    if (group) {
-                        const curCol = group.children.item(colIndex)
-                        curCol.style.setProperty('width', `${calcColWidth}px`);
-                        const tableEl = curCol.closest('table')
-                        let width = tableWidth + marginX
-                        if (t.closest('.table-fixed-body')) {
-                            width = width - table.scrollWidth;
-                        }
-                        tableEl.setAttribute('style', `width: ${width}px;`)
+                const calcColWidth = Math.max(Math.round(colWidth + marginX), colMinWidth);
+                columnWidths[colIndex] = calcColWidth;
+                table.tables.forEach((t, index) => {
+                    setColumnWidth(t, colIndex, calcColWidth);
+                    tableColumnWidths[index][colIndex] = calcColWidth;
+                    const width = tableColumnWidths[index].reduce((total, columnWidth) => total + columnWidth, 0);
+                    t.style.setProperty('width', `${width}px`);
+                });
 
-                        resetColumnWidthTips(table, col);
+                resetColumnWidthTips(table, col);
 
-                        const header = getColumnHeader(col);
-                        if (header.classList.contains('fixed')) {
-                            resizeNextFixedColumnWidth(header, getWidth(header));
+                const header = getColumnHeader(col);
+                if (header.classList.contains('fixed')) {
+                    resizeNextFixedColumnWidth(header, calcColWidth, columnWidths, colIndex);
+                    table.tables.forEach(t => {
+                        const tbody = [...t.children].find(i => i.nodeName === 'TBODY');
+                        if (!tbody) {
+                            return;
                         }
-                    }
 
-                    const tbody = [...t.children].find(i => i.nodeName === 'TBODY');
-                    if (tbody) {
                         const rows = [...tbody.children].filter(i => i.nodeName === 'TR');
                         rows.forEach(row => {
-                            const header = row.children.item(colIndex);
-                            if (header !== null && header.classList.contains('fixed')) {
-                                resizeNextFixedColumnWidth(header, getWidth(header));
+                            const cell = row.children.item(colIndex);
+                            if (cell?.classList.contains('fixed')) {
+                                resizeNextFixedColumnWidth(cell, calcColWidth, columnWidths, colIndex);
                             }
                         });
-                    }
-                })
+                    });
+                }
             },
             () => {
                 eff(col, false)
 
-                const state = getColumnStateObject(table);
+                const field = getColumnName(col);
+                const state = getColumnStateObject(table, field);
+                table.options.columnStates = state.cols;
                 saveColumnStateToLocalstorage(table, state);
 
-                const field = getColumnName(col);
                 table.invoke.invokeMethodAsync(table.options.resizeColumnCallback, field, state);
             }
         )
     })
 }
 
-const resizeNextFixedColumnWidth = (col, width) => {
+const resizeNextFixedColumnWidth = (col, width, columnWidths, colIndex) => {
     if (col.classList.contains('fixed-right')) {
         const nextColumn = col.previousElementSibling;
-        if (nextColumn.classList.contains('fixed')) {
-            const right = parseFloat(col.style.getPropertyValue('right'));
+        if (nextColumn?.classList.contains('fixed')) {
+            const nextIndex = colIndex - 1;
+            const right = parseFloat(col.style.getPropertyValue('right')) || 0;
             nextColumn.style.setProperty('right', `${right + width}px`);
-            resizeNextFixedColumnWidth(nextColumn, getWidth(nextColumn));
+            const nextWidth = columnWidths[nextIndex];
+            if (nextWidth !== void 0) {
+                resizeNextFixedColumnWidth(nextColumn, nextWidth, columnWidths, nextIndex);
+            }
         }
     }
     else if (col.classList.contains('fixed')) {
         const nextColumn = col.nextElementSibling;
-        if (nextColumn.classList.contains('fixed')) {
-            const left = parseFloat(col.style.getPropertyValue('left'));
+        if (nextColumn?.classList.contains('fixed')) {
+            const nextIndex = colIndex + 1;
+            const left = parseFloat(col.style.getPropertyValue('left')) || 0;
             nextColumn.style.setProperty('left', `${left + width}px`);
-            resizeNextFixedColumnWidth(nextColumn, getWidth(nextColumn));
+            const nextWidth = columnWidths[nextIndex];
+            if (nextWidth !== void 0) {
+                resizeNextFixedColumnWidth(nextColumn, nextWidth, columnWidths, nextIndex);
+            }
         }
     }
 }
@@ -610,6 +632,34 @@ const getColumnName = col => getColumnHeader(col).getAttribute('data-bb-field');
 
 const getResizableColumnWidth = col => getWidth(getColumnHeader(col)) | 0;
 
+const getHeaderCells = table => [...(table.querySelector('[data-bb-header-row]')?.cells ?? [])];
+
+const getSizingCells = table => [...(table.querySelector('[data-bb-sizing-row]')?.cells ?? [])];
+
+const getWidthCells = table => {
+    const sizingCells = getSizingCells(table);
+    return sizingCells.length > 0 ? sizingCells : getHeaderCells(table);
+}
+
+const getColumnWidthCell = (table, index) => getHeaderCells(table)[index] ?? getSizingCells(table)[index];
+
+const getColumnWidths = table => getWidthCells(table).map(cell => {
+    const width = parseFloat(cell.style.width);
+    return !isNaN(width) ? width : getWidth(cell);
+});
+
+const getRenderedColumnWidths = table => getWidthCells(table).map(cell => getWidth(cell));
+
+const setColumnWidth = (table, index, width) => {
+    const value = typeof width === 'number' ? `${width}px` : width;
+    const cells = [getHeaderCells(table)[index], getSizingCells(table)[index]];
+    [...new Set(cells)].forEach(cell => {
+        if (cell) {
+            cell.style.setProperty('width', value);
+        }
+    });
+}
+
 const indexOfCol = col => {
     const th = getColumnHeader(col);
     const row = th.parentElement;
@@ -617,9 +667,9 @@ const indexOfCol = col => {
 }
 
 const autoFitColumnWidth = async (table, col) => {
-    stopAutoColumnWidth(table);
     const field = getColumnName(col);
     const index = indexOfCol(col);
+    freezeAutoColumnWidths(table);
     let rows = null;
     let maxWidth = getColumnMaxCellWidth(table, index);
     
@@ -629,25 +679,27 @@ const autoFitColumnWidth = async (table, col) => {
     }
 
     if (maxWidth > 0) {
-        table.tables.forEach(table => {
-            const colEl = table.querySelectorAll('colgroup col')[index];
-            if (colEl) {
-                colEl.style.setProperty('width', `${maxWidth}px`);
-            }
-
-            const th = table.querySelectorAll('thead > tr > th')[index];
+        table.tables.forEach(tableEl => {
+            setColumnWidth(tableEl, index, maxWidth);
+            const th = getHeaderCells(tableEl)[index];
             if (th) {
                 const span = th.querySelector('.table-text');
-                span.style.removeProperty('width');
+                span?.style.removeProperty('width');
             }
 
-            const tableWidth = getTableWidth(table);
-            table.style.setProperty('width', `${tableWidth}px`);
+            if (!table.thead || table.autoColumns.length === 0) {
+                const tableWidth = getTableWidth(tableEl);
+                tableEl.style.setProperty('width', `${tableWidth}px`);
+            }
         });
+        if (table.thead && table.autoColumns.length > 0) {
+            syncFixedHeaderColumnWidths(table);
+        }
 
         resetColumnWidthTips(table, col);
 
-        const state = getColumnStateObject(table);
+        const state = getColumnStateObject(table, field);
+        table.options.columnStates = state.cols;
         saveColumnStateToLocalstorage(table, state);
 
         await table.invoke.invokeMethodAsync(table.options.resizeColumnCallback, field, state);
@@ -847,13 +899,13 @@ const disposeColumnDrag = columns => {
 const setDraggable = table => {
     let dragItem = null;
     let index = 0
-    table.dragColumns = [...table.tables[0].querySelectorAll('thead > tr > th')].filter(i => i.draggable)
+    table.dragColumns = getHeaderCells(table.tables[0]).filter(i => i.draggable)
     disposeDragColumns(table.dragColumns);
     table.dragColumns.forEach(col => {
         EventHandler.on(col, 'dragstart', e => {
             col.parentNode.classList.add('table-dragging')
             col.classList.add('table-drag')
-            table.dragColumns = [...table.tables[0].querySelectorAll('thead > tr > th')].filter(i => i.draggable)
+            table.dragColumns = getHeaderCells(table.tables[0]).filter(i => i.draggable)
             index = table.dragColumns.indexOf(col)
             dragItem = col
             e.dataTransfer.effectAllowed = 'move'
@@ -1011,18 +1063,19 @@ const getLocalStorageValue = key => {
     return result;
 }
 
-const getColumnStateObject = table => {
+const getColumnStateObject = (table, resizedField) => {
     const cols = table.options.columnStates;
     if (cols !== void 0) {
+        const columnStates = cols.map(col => {
+            return {
+                name: col.name,
+                width: col.name === resizedField ? getColumnWidth(table, col, table.columns) : col.width,
+                visible: col.visible
+            }
+        });
         return {
-            cols: cols.map(col => {
-                return {
-                    name: col.name,
-                    width: getColumnWidth(col, table.columns),
-                    visible: col.visible
-                }
-            }),
-            table: getTableWidth(table.tables[0])
+            cols: columnStates,
+            table: columnStates.some(col => col.visible && col.width == null) ? 0 : getTableWidth(table.tables[0])
         };
     }
 
@@ -1030,7 +1083,7 @@ const getColumnStateObject = table => {
         cols: table.columns.map(col => {
             return {
                 name: getColumnName(col),
-                width: getResizableColumnWidth(col),
+                width: getColumnStyleWidth(table, col),
                 visible: true
             }
         }),
@@ -1038,11 +1091,10 @@ const getColumnStateObject = table => {
     };
 }
 
-const getColumnWidth = (col, columns) => {
+const getColumnWidth = (table, col, columns) => {
     const column = columns.find(i => getColumnName(i) === col.name);
     if (column) {
-        const width = getResizableColumnWidth(column);
-        return width > 0 ? width : null;
+        return getColumnStyleWidth(table, column);
     }
     else if (col.width) {
         return col.width;
@@ -1052,11 +1104,17 @@ const getColumnWidth = (col, columns) => {
     }
 }
 
+const getColumnStyleWidth = (table, col) => {
+    const index = indexOfCol(col);
+    const cell = getColumnWidthCell(table.tables[0], index);
+    const width = parseFloat(cell?.style.width);
+    return !isNaN(width) && width > 0 ? width : getResizableColumnWidth(col);
+}
+
 const getTableWidth = table => {
     let tableWidth = 0;
-    const colgroup = [...table.children].find(i => i.nodeName === 'COLGROUP');
-    for (const col of colgroup.children) {
-        const width = parseInt(col.style.width);
+    for (const cell of getWidthCells(table)) {
+        const width = parseFloat(cell.style.width);
         if (isNaN(width)) {
             tableWidth = null;
             break;
@@ -1065,7 +1123,7 @@ const getTableWidth = table => {
             tableWidth += width;
         }
     }
-    return (tableWidth ?? getWidth(table)) | 0;
+    return Math.round(tableWidth ?? getWidth(table));
 }
 
 const getColumnWidthStateObject = table => {
@@ -1170,7 +1228,8 @@ const setColSize = (table, options) => {
     if (!table.tables || table.tables.length === 0) {
         return;
     }
-    const headerCollection = [...table.tables[0].querySelectorAll('thead > tr > th')];
+    const headerCollection = getHeaderCells(table.tables[0]);
+    const widthCells = getWidthCells(table.tables[0]);
     const columnMinWidth = table.options.columnMinWidth || 0;
     const autoColumns = [];
     options.columnStates.forEach(col => {
@@ -1178,22 +1237,65 @@ const setColSize = (table, options) => {
             return;
         }
         const th = headerCollection.find(i => i.getAttribute('data-bb-field') === col.name);
-        if (th === void 0) {
+        const widthCell = widthCells.find(i => i.getAttribute('data-bb-field') === col.name);
+        if (widthCell === void 0) {
             return;
         }
-        const colIndex = headerCollection.indexOf(th);
-        const minWidth = Math.max(getCellWidth(th) + getHeaderIconsWidth(th), getColumnMaxCellWidth(table, colIndex), columnMinWidth) | 0;
+        const colIndex = widthCells.indexOf(widthCell);
+        const headerWidth = th ? getCellWidth(th) + getHeaderIconsWidth(th) : 0;
+        const minWidth = Math.max(headerWidth, getColumnMaxCellWidth(table, colIndex), columnMinWidth) | 0;
         autoColumns.push({ colIndex, minWidth });
     });
     table.autoColumns = autoColumns;
+    table.options.columnStates = options.columnStates;
     applyColumnMinWidth(table);
 }
 
-const stopAutoColumnWidth = table => {
+const freezeAutoColumnWidths = table => {
     if (table.minWidthRaf) {
         cancelAnimationFrame(table.minWidthRaf);
         table.minWidthRaf = null;
     }
+    const sourceTable = table.thead ? table.tables[1] : table.tables[0];
+    const sourceCells = getWidthCells(sourceTable);
+    const measuredColumns = [];
+    table.options.columnStates.forEach(col => {
+        if (col.visible === false || col.width != null) {
+            return;
+        }
+        const colIndex = sourceCells.findIndex(cell => cell.getAttribute('data-bb-field') === col.name);
+        if (colIndex > -1) {
+            measuredColumns.push({
+                name: col.name,
+                colIndex,
+                width: getWidth(sourceCells[colIndex])
+            });
+        }
+    });
+    measuredColumns.sort((x, y) => x.colIndex - y.colIndex);
+
+    let measuredTotal = 0;
+    let roundedTotal = 0;
+    const frozenColumns = measuredColumns.map(column => {
+        measuredTotal += column.width;
+        const nextRoundedTotal = Math.round(measuredTotal);
+        const width = nextRoundedTotal - roundedTotal;
+        roundedTotal = nextRoundedTotal;
+        return { ...column, width };
+    });
+
+    const autoColumnWidths = new Map();
+    frozenColumns.forEach(column => {
+        autoColumnWidths.set(column.name, column.width);
+        table.tables.forEach(tableEl => setColumnWidth(tableEl, column.colIndex, column.width));
+    });
+
+    table.options.columnStates = table.options.columnStates.map(col => {
+        return {
+            ...col,
+            width: autoColumnWidths.get(col.name) ?? col.width
+        }
+    });
     table.autoColumns = [];
 }
 
@@ -1206,27 +1308,38 @@ const getHeaderIconsWidth = th => {
 }
 
 const applyColumnMinWidth = table => {
-    if (!table.thead || !table.body || !table.autoColumns || table.autoColumns.length === 0) {
+    if (!table.thead || !table.body) {
         return;
     }
-    setAutoColWidths(table, true);
-    const compact = table.body.scrollWidth > table.body.clientWidth + 1;
-    if (!compact) {
-        setAutoColWidths(table, false);
+    if (table.autoColumns && table.autoColumns.length > 0) {
+        setAutoColWidths(table, true);
+        const compact = table.body.scrollWidth > table.body.clientWidth + 1;
+        if (!compact) {
+            setAutoColWidths(table, false);
+        }
     }
+    syncFixedHeaderColumnWidths(table);
 }
 
 const setAutoColWidths = (table, apply) => {
-    const colgroups = table.tables.map(t => t.querySelectorAll('colgroup col'));
+    const bodyTable = table.tables[1];
     table.autoColumns.forEach(({ colIndex, minWidth }) => {
         const width = apply ? `${minWidth}px` : '';
-        colgroups.forEach(cols => {
-            const colEl = cols[colIndex];
-            if (colEl) {
-                colEl.style.width = width;
-            }
-        });
+        setColumnWidth(bodyTable, colIndex, width);
+    });
+}
+
+const syncFixedHeaderColumnWidths = table => {
+    if (!table.thead || table.tables.length < 2) {
+        return;
+    }
+    const headerTable = table.tables[0];
+    const bodyTable = table.tables[1];
+    getRenderedColumnWidths(bodyTable).forEach((width, index) => {
+        setColumnWidth(headerTable, index, width);
     });
+    headerTable.style.setProperty('width', `${getWidth(bodyTable) + (table.scrollWidth || 0)}px`);
+    table.thead.classList.remove('is-width-syncing');
 }
 
 const updateSortTooltip = table => {
diff --git a/src/BootstrapBlazor/Components/Table/Table.razor.scss b/src/BootstrapBlazor/Components/Table/Table.razor.scss
index f95e66ae49d..01314785de7 100644
--- a/src/BootstrapBlazor/Components/Table/Table.razor.scss
+++ b/src/BootstrapBlazor/Components/Table/Table.razor.scss
@@ -110,7 +110,8 @@
     border: 1px solid var(--bs-border-color);
 }
 
-.table-wrapper thead tr:first-child {
+.table-wrapper thead tr:first-child,
+.table-wrapper thead tr.table-sizing-row + tr {
     border-top: none;
 }
 
@@ -124,6 +125,10 @@
     border-left-width: 0;
 }
 
+.table th.fixed-scroll {
+    padding-inline: 0;
+}
+
 .table-wrapper th:last-child,
 .table-wrapper td:last-child,
 .table-wrapper .table-fixed-header th:nth-last-of-type(2):not(.border-resize) {
@@ -152,6 +157,18 @@
     overflow: hidden;
 }
 
+.table .table-sizing-row {
+    height: 0;
+
+    > th {
+        height: 0;
+        padding: 0;
+        border: 0;
+        line-height: 0;
+        pointer-events: none;
+    }
+}
+
 .table thead th.sortable .table-text {
     cursor: pointer;
 }
@@ -451,6 +468,10 @@
     overflow: hidden;
     border-top-left-radius: var(--bs-border-radius);
     border-top-right-radius: var(--bs-border-radius);
+
+    &.is-width-syncing {
+        visibility: hidden;
+    }
 }
 
 .table-scroll {
@@ -752,7 +773,7 @@ tr.active:not(.is-edit):hover {
     padding-left: 4px;
 }
 
-.table-bordered thead tr:last-child > th {
+.table-bordered thead tr:last-child:not(.table-sizing-row) > th {
     border-bottom-width: 2px;
     border-bottom-color: rgba(var(--bs-body-color-rgb), 0.125);
 }
diff --git a/test/UnitTest/Components/ContextMenuTest.cs b/test/UnitTest/Components/ContextMenuTest.cs
index 60bbe91cc91..5bca89fa077 100644
--- a/test/UnitTest/Components/ContextMenuTest.cs
+++ b/test/UnitTest/Components/ContextMenuTest.cs
@@ -88,13 +88,19 @@ public async Task ContextMenu_Ok()
                 return false;
             });
         });
+        var beforeShowCallback = false;
         menu.Render(pb =>
         {
             pb.Add(a => a.OnBeforeShowCallback, v =>
             {
+                beforeShowCallback = true;
+                Assert.Same(foo, v);
                 return Task.CompletedTask;
             });
         });
+        await row.ContextMenuAsync(new MouseEventArgs { Button = 2, Buttons = 2 });
+        Assert.True(beforeShowCallback);
+
         item = menu.Find(".dropdown-item");
         item.Click();
         Assert.True(menuCallback);
diff --git a/test/UnitTest/Components/TableTest.cs b/test/UnitTest/Components/TableTest.cs
index 395953bbebc..f84c21ffd80 100644
--- a/test/UnitTest/Components/TableTest.cs
+++ b/test/UnitTest/Components/TableTest.cs
@@ -286,7 +286,7 @@ await cut.InvokeAsync(() => table.Instance.ResetVisibleColumns(
         Assert.Equal("地址", labels[1].TextContent);
 
         // 检查宽度设置
-        Assert.Contains("<col style=\"width: 120px;\" />", table.Markup);
+        Assert.Contains("width: 120px;", table.Find("th[data-bb-field='Name']").GetAttribute("style"));
     }
 
     [Fact]
@@ -1610,6 +1610,13 @@ public void IsFixedHeader_Ok()
         cut.Contains("table-fixed-header");
         cut.Contains("height: 200px;");
         cut.Contains("table-layout-fixed");
+        cut.Contains("table-fixed-header is-width-syncing");
+        Assert.Equal("width: calc(100% + 5px);", cut.Find(".table-fixed-header > table").GetAttribute("style"));
+        var scrollColumn = cut.Find("th.fixed-scroll");
+        Assert.Equal("width: 5px; min-width: 5px; max-width: 5px;", scrollColumn.GetAttribute("style"));
+        Assert.Empty(scrollColumn.Children);
+        Assert.Empty(cut.FindAll("colgroup"));
+        Assert.Single(cut.FindAll("[data-bb-sizing-row]"));
     }
 
     [Theory]
@@ -1751,6 +1758,44 @@ public void AllowResizing_Ok(bool resizing)
         cut.DoesNotContain("table-layout-fixed");
     }
 
+    [Fact]
+    public void ColumnWidthStyle_FallbackToColumnWidth_Ok()
+    {
+        var localizer = Context.Services.GetRequiredService<IStringLocalizer<Foo>>();
+        var cut = Context.Render<BootstrapBlazorRoot>(pb =>
+        {
+            pb.AddChildContent<Table<Foo>>(pb =>
+            {
+                pb.Add(a => a.RenderMode, TableRenderMode.Table);
+                pb.Add(a => a.AllowResizing, true);
+                pb.Add(a => a.Items, Foo.GenerateFoo(localizer, 1));
+                pb.Add(a => a.TableColumns, foo => builder =>
+                {
+                    builder.OpenComponent<TableColumn<Foo, string>>(0);
+                    builder.AddAttribute(1, "Field", nameof(Foo.Name));
+                    builder.AddAttribute(2, "FieldExpression", Utility.GenerateValueExpression(foo, nameof(Foo.Name), typeof(string)));
+                    builder.AddAttribute(3, "Width", 100);
+                    builder.CloseComponent();
+                });
+            });
+        });
+
+        var table = cut.FindComponent<Table<Foo>>().Instance;
+        var stateField = typeof(Table<Foo>).GetField("_tableColumnStateCache", BindingFlags.Instance | BindingFlags.NonPublic)!;
+        var state = (TableColumnClientStatus)stateField.GetValue(table)!;
+        state.Columns.Clear();
+
+        var method = typeof(Table<Foo>).GetMethod(
+            "GetColumnWidthStyleString",
+            BindingFlags.Instance | BindingFlags.NonPublic,
+            null,
+            [typeof(ITableColumn)],
+            null)!;
+        var style = method.Invoke(table, [table.GetVisibleColumns()[0]]);
+
+        Assert.Equal("width: 100px;", style);
+    }
+
     [Theory]
     [InlineData(null)]
     [InlineData(100)]
@@ -1850,10 +1895,9 @@ public void ColumnFixed_Ok(bool showExtendButton, bool isFixedHeader)
         cut.Contains("left: 0px;");
         cut.Contains("left: 200px;");
         var columns = cut.FindAll("th");
-        var col = cut.FindAll("col");
         if (columns[0].ClassName == "fixed")
         {
-            var fixedWidth = cut.FindAll("col")[0].OuterHtml.Contains("width: 200px");
+            var fixedWidth = columns[0].OuterHtml.Contains("width: 200px");
             Assert.Equal("fixedWidth:True", $"fixedWidth:{fixedWidth}");
         }
 
@@ -1887,6 +1931,7 @@ public void ColumnFixed_Ok(bool showExtendButton, bool isFixedHeader)
                 cut.Contains("right: 8px;");
             }
         }
+        Assert.Empty(cut.FindAll("td[style*='width']"));
     }
 
     [Fact]
@@ -1946,7 +1991,7 @@ public void ColumnFixed_TailColumn_Ok()
         });
 
         cut.Contains("style=\"left: 0px;\"");
-        cut.Contains("style=\"left: 100px;\"");
+        cut.Contains("left: 100px;");
         cut.Contains("style=\"right: 200px;\"");
         cut.Contains("style=\"right: 100px;\"");
         cut.Contains("style=\"right: 0px;\"");
@@ -2091,13 +2136,13 @@ public void FixedColumn_Ok()
         });
 
         // DetailRow
-        cut.Contains("style=\"left: 0;\"");
+        cut.Contains("left: 0;");
         // MultipleSelect
-        cut.Contains("style=\"left: 100px;\"");
+        cut.Contains("left: 100px;");
         // LineNo
-        cut.Contains("style=\"left: 136px;\"");
+        cut.Contains("left: 136px;");
         // Name
-        cut.Contains("style=\"left: 236px;\"");
+        cut.Contains("left: 236px;");
         cut.Contains("width: 180px; min-width: 180px;");
 
         var table = cut.FindComponent<Table<Foo>>();
@@ -2114,27 +2159,27 @@ public void FixedColumn_Ok()
             pb.Add(a => a.FixedDetailRowHeaderColumn, false);
         });
         // MultipleSelect
-        cut.Contains("style=\"left: 0px;\"");
+        cut.Contains("left: 0px;");
         // LineNo
-        cut.Contains("style=\"left: 36px;\"");
+        cut.Contains("left: 36px;");
         // Name
-        cut.Contains("style=\"left: 136px;\"");
+        cut.Contains("left: 136px;");
 
         table.Render(pb =>
         {
             pb.Add(a => a.FixedMultipleColumn, false);
         });
         // LineNo
-        cut.Contains("style=\"left: 0px;\"");
+        cut.Contains("left: 0px;");
         // Name
-        cut.Contains("style=\"left: 100px;\"");
+        cut.Contains("left: 100px;");
 
         table.Render(pb =>
         {
             pb.Add(a => a.FixedLineNoColumn, false);
         });
         // Name
-        cut.Contains("style=\"left: 0px;\"");
+        cut.Contains("left: 0px;");
 
         table.Render(pb =>
         {
@@ -2142,11 +2187,11 @@ public void FixedColumn_Ok()
             pb.Add(a => a.FixedLineNoColumn, true);
         });
         // Detail
-        cut.Contains("style=\"left: 0;\"");
+        cut.Contains("left: 0;");
         // LineNo
-        cut.Contains("style=\"left: 100px;\"");
+        cut.Contains("left: 100px;");
         // Name
-        cut.Contains("style=\"left: 200px;\"");
+        cut.Contains("left: 200px;");
     }
 
     [Fact]
@@ -2202,7 +2247,7 @@ public void Column_IsFixedDetailColumn()
                 });
             });
         });
-        cut.Contains("style=\"left: 0;\"");
+        cut.Contains("left: 0;");
     }
 
     class MockTableColumn : AutoGenerateColumnAttribute
@@ -2372,6 +2417,173 @@ public void IsExtendButtonsInRowHeader_Ok(bool inRowHeader)
         cut.Contains("test-button");
     }
 
+    [Theory]
+    [InlineData(true, false, true, "fr")]
+    [InlineData(true, true, true, null)]
+    [InlineData(false, false, true, "fl")]
+    [InlineData(false, true, true, null)]
+    [InlineData(true, false, false, null)]
+    [InlineData(false, false, false, null)]
+    public void FixedExtendButtonsColumn_BoundaryClass_Ok(
+        bool inRowHeader,
+        bool hasAdjacentFixedColumn,
+        bool fixedExtendButtonsColumn,
+        string? expectedClass)
+    {
+        var localizer = Context.Services.GetRequiredService<IStringLocalizer<Foo>>();
+        var cut = Context.Render<BootstrapBlazorRoot>(pb =>
+        {
+            pb.AddChildContent<Table<Foo>>(pb =>
+            {
+                pb.Add(a => a.RenderMode, TableRenderMode.Table);
+                pb.Add(a => a.Items, Foo.GenerateFoo(localizer));
+                pb.Add(a => a.ShowExtendButtons, true);
+                pb.Add(a => a.FixedExtendButtonsColumn, fixedExtendButtonsColumn);
+                pb.Add(a => a.IsExtendButtonsInRowHeader, inRowHeader);
+                pb.Add(a => a.TableColumns, foo => builder =>
+                {
+                    builder.OpenComponent<TableColumn<Foo, string>>(0);
+                    builder.AddAttribute(1, "Field", foo.Name);
+                    builder.AddAttribute(2, "FieldExpression", Utility.GenerateValueExpression(foo, nameof(Foo.Name), typeof(string)));
+                    builder.AddAttribute(3, nameof(TableColumn<,>.Fixed), inRowHeader && hasAdjacentFixedColumn);
+                    builder.CloseComponent();
+
+                    builder.OpenComponent<TableColumn<Foo, int>>(4);
+                    builder.AddAttribute(5, "Field", foo.Count);
+                    builder.AddAttribute(6, "FieldExpression", Utility.GenerateValueExpression(foo, nameof(Foo.Count), typeof(int)));
+                    builder.AddAttribute(7, nameof(TableColumn<,>.Fixed), !inRowHeader && hasAdjacentFixedColumn);
+                    builder.CloseComponent();
+                });
+            });
+        });
+
+        var selector = inRowHeader
+            ? "[data-bb-header-row] > th:first-child"
+            : "[data-bb-header-row] > th:last-child";
+        var column = cut.Find(selector);
+        Assert.Equal(fixedExtendButtonsColumn, column.ClassList.Contains("fixed"));
+        Assert.Equal(fixedExtendButtonsColumn && !inRowHeader, column.ClassList.Contains("fixed-right"));
+        Assert.Equal(expectedClass == "fr", column.ClassList.Contains("fr"));
+        Assert.Equal(expectedClass == "fl", column.ClassList.Contains("fl"));
+
+        var cellSelector = inRowHeader
+            ? "tbody tr > td:first-child"
+            : "tbody tr > td:last-child";
+        var cell = cut.Find(cellSelector);
+        Assert.Equal(fixedExtendButtonsColumn, cell.ClassList.Contains("fixed"));
+        Assert.Equal(fixedExtendButtonsColumn && !inRowHeader, cell.ClassList.Contains("fixed-right"));
+        Assert.Equal(expectedClass == "fr", cell.ClassList.Contains("fr"));
+        Assert.Equal(expectedClass == "fl", cell.ClassList.Contains("fl"));
+    }
+
+    [Theory]
+    [InlineData(true, "Name", "left: 130px;")]
+    [InlineData(false, "Count", "right: 130px;")]
+    public void FixedExtendButtonsColumn_DataColumnOffset_Ok(bool inRowHeader, string fieldName, string expectedStyle)
+    {
+        var localizer = Context.Services.GetRequiredService<IStringLocalizer<Foo>>();
+        var cut = Context.Render<BootstrapBlazorRoot>(pb =>
+        {
+            pb.AddChildContent<Table<Foo>>(pb =>
+            {
+                pb.Add(a => a.RenderMode, TableRenderMode.Table);
+                pb.Add(a => a.Items, Foo.GenerateFoo(localizer));
+                pb.Add(a => a.ShowExtendButtons, true);
+                pb.Add(a => a.FixedExtendButtonsColumn, true);
+                pb.Add(a => a.IsExtendButtonsInRowHeader, inRowHeader);
+                pb.Add(a => a.TableColumns, foo => builder =>
+                {
+                    builder.OpenComponent<TableColumn<Foo, string>>(0);
+                    builder.AddAttribute(1, "Field", foo.Name);
+                    builder.AddAttribute(2, "FieldExpression", Utility.GenerateValueExpression(foo, nameof(Foo.Name), typeof(string)));
+                    builder.AddAttribute(3, nameof(TableColumn<,>.Fixed), inRowHeader);
+                    builder.CloseComponent();
+
+                    builder.OpenComponent<TableColumn<Foo, int>>(4);
+                    builder.AddAttribute(5, "Field", foo.Count);
+                    builder.AddAttribute(6, "FieldExpression", Utility.GenerateValueExpression(foo, nameof(Foo.Count), typeof(int)));
+                    builder.AddAttribute(7, nameof(TableColumn<,>.Fixed), !inRowHeader);
+                    builder.CloseComponent();
+                });
+            });
+        });
+
+        Assert.Contains(expectedStyle, cut.Find($"[data-bb-field='{fieldName}']").GetAttribute("style"));
+    }
+
+    [Fact]
+    public void FixedExtendButtonsColumn_ZeroWidth_Ok()
+    {
+        var localizer = Context.Services.GetRequiredService<IStringLocalizer<Foo>>();
+        var cut = Context.Render<BootstrapBlazorRoot>(pb =>
+        {
+            pb.AddChildContent<Table<Foo>>(pb =>
+            {
+                pb.Add(a => a.RenderMode, TableRenderMode.Table);
+                pb.Add(a => a.Items, Foo.GenerateFoo(localizer));
+                pb.Add(a => a.ShowExtendButtons, true);
+                pb.Add(a => a.FixedExtendButtonsColumn, true);
+                pb.Add(a => a.ExtendButtonColumnWidth, 0);
+                pb.Add(a => a.TableColumns, foo => builder =>
+                {
+                    builder.OpenComponent<TableColumn<Foo, string>>(0);
+                    builder.AddAttribute(1, "Field", foo.Name);
+                    builder.AddAttribute(2, "FieldExpression", Utility.GenerateValueExpression(foo, nameof(Foo.Name), typeof(string)));
+                    builder.CloseComponent();
+                });
+            });
+        });
+
+        Assert.Equal("right: 0px;", cut.Find("[data-bb-header-row] > th:last-child").GetAttribute("style"));
+        Assert.Equal("right: 0px;", cut.Find("tbody tr > td:last-child").GetAttribute("style"));
+    }
+
+    [Fact]
+    public void FixedExtendButtonsColumn_LeftMargin_Ok()
+    {
+        var localizer = Context.Services.GetRequiredService<IStringLocalizer<Foo>>();
+        var cut = Context.Render<BootstrapBlazorRoot>(pb =>
+        {
+            pb.AddChildContent<Table<Foo>>(pb =>
+            {
+                pb.Add(a => a.RenderMode, TableRenderMode.Table);
+                pb.Add(a => a.Items, Foo.GenerateFoo(localizer));
+                pb.Add(a => a.ShowExtendButtons, true);
+                pb.Add(a => a.FixedExtendButtonsColumn, true);
+                pb.Add(a => a.IsExtendButtonsInRowHeader, true);
+                pb.Add(a => a.DetailColumnWidth, 70);
+                pb.Add(a => a.DetailRowTemplate, foo => builder => builder.AddContent(0, foo.Name));
+                pb.Add(a => a.FixedDetailRowHeaderColumn, false);
+                pb.Add(a => a.FixedMultipleColumn, true);
+                pb.Add(a => a.ShowLineNo, true);
+                pb.Add(a => a.FixedLineNoColumn, true);
+                pb.Add(a => a.LineNoColumnWidth, 100);
+                pb.Add(a => a.TableColumns, foo => builder =>
+                {
+                    builder.OpenComponent<TableColumn<Foo, string>>(0);
+                    builder.AddAttribute(1, "Field", foo.Name);
+                    builder.AddAttribute(2, "FieldExpression", Utility.GenerateValueExpression(foo, nameof(Foo.Name), typeof(string)));
+                    builder.CloseComponent();
+                });
+            });
+        });
+
+        Assert.Contains("left: 100px;", cut.Find("[data-bb-header-row] > th.fixed.fr").GetAttribute("style"));
+
+        var table = cut.FindComponent<Table<Foo>>();
+        table.Render(pb =>
+        {
+            pb.Add(a => a.IsMultipleSelect, true);
+        });
+        Assert.Contains("left: 136px;", cut.Find("[data-bb-header-row] > th.fixed.fr").GetAttribute("style"));
+
+        table.Render(pb =>
+        {
+            pb.Add(a => a.FixedDetailRowHeaderColumn, true);
+        });
+        Assert.Contains("left: 206px;", cut.Find("[data-bb-header-row] > th.fixed.fr").GetAttribute("style"));
+    }
+
     [Fact]
     public void RowButtonTemplate_Ok()
     {
@@ -2425,7 +2637,7 @@ public void ShowExtendButtons_Table_Ok()
                 });
             });
         });
-        cut.Contains("<col style=\"width: 130px;\" />");
+        Assert.Contains("width: 130px;", cut.Find("[data-bb-header-row] > th:last-child").GetAttribute("style"));
     }
 
     [Fact]
@@ -3456,6 +3668,108 @@ public void MultiHeaderTemplate_Ok()
             });
         });
         cut.Contains("Test-MultiHeaderTemplate");
+        Assert.Empty(cut.FindAll("colgroup"));
+        Assert.Equal("true", cut.Find("thead > tr:first-child").GetAttribute("data-bb-sizing-row"));
+    }
+
+    [Theory]
+    [InlineData(true)]
+    [InlineData(false)]
+    public void SizingHeader_Ok(bool extendButtonsInRowHeader)
+    {
+        var state = new TableColumnClientStatus
+        {
+            TableWidth = 100,
+            Columns =
+            [
+                new() { Name = nameof(Foo.Name), Visible = true, Width = 100 }
+            ]
+        };
+        Context.JSInterop.Setup<TableColumnClientStatus>("getColumnStates", "test_sizing_header").SetResult(state);
+
+        var localizer = Context.Services.GetRequiredService<IStringLocalizer<Foo>>();
+        var cut = Context.Render<BootstrapBlazorRoot>(pb =>
+        {
+            pb.AddChildContent<Table<Foo>>(pb =>
+            {
+                pb.Add(a => a.RenderMode, TableRenderMode.Table);
+                pb.Add(a => a.ClientTableName, "test_sizing_header");
+                pb.Add(a => a.IsFixedHeader, true);
+                pb.Add(a => a.IsDetails, true);
+                pb.Add(a => a.IsMultipleSelect, true);
+                pb.Add(a => a.ShowLineNo, true);
+                pb.Add(a => a.ShowExtendButtons, true);
+                pb.Add(a => a.IsExtendButtonsInRowHeader, extendButtonsInRowHeader);
+                pb.Add(a => a.Items, Foo.GenerateFoo(localizer, 1));
+                pb.Add(a => a.DetailRowTemplate, foo => builder => builder.AddContent(0, foo.Name));
+                pb.Add(a => a.TableColumns, foo => builder =>
+                {
+                    builder.OpenComponent<TableColumn<Foo, string>>(0);
+                    builder.AddAttribute(1, "Field", nameof(Foo.Name));
+                    builder.AddAttribute(2, "FieldExpression", Utility.GenerateValueExpression(foo, nameof(Foo.Name), typeof(string)));
+                    builder.CloseComponent();
+                });
+                pb.Add(a => a.MultiHeaderTemplate, builder =>
+                {
+                    builder.OpenElement(0, "tr");
+                    builder.OpenElement(1, "th");
+                    builder.AddAttribute(2, "colspan", 5);
+                    builder.AddContent(3, "Test-MultiHeaderTemplate");
+                    builder.CloseElement();
+                    builder.CloseElement();
+                });
+            });
+        });
+
+        var headerSizingRow = cut.Find(".table-fixed-header [data-bb-sizing-row]");
+        var bodySizingRow = cut.Find(".table-fixed-body [data-bb-sizing-row]");
+
+        Assert.Equal(6, headerSizingRow.Children.Length);
+        Assert.Equal(5, bodySizingRow.Children.Length);
+        Assert.Contains(headerSizingRow.Children, cell => cell.GetAttribute("style")?.Contains("width: 100px;") == true);
+        Assert.Single(bodySizingRow.QuerySelectorAll($"th[data-bb-field='{nameof(Foo.Name)}']"));
+        Assert.DoesNotContain("is-width-syncing", cut.Find(".table-fixed-header").ClassList);
+        Assert.Empty(cut.FindAll("td[style*='width']"));
+    }
+
+    [Fact]
+    public void FixedHeader_MixedColumnWidth_Ok()
+    {
+        var localizer = Context.Services.GetRequiredService<IStringLocalizer<Foo>>();
+        var cut = Context.Render<BootstrapBlazorRoot>(pb =>
+        {
+            pb.AddChildContent<Table<Foo>>(pb =>
+            {
+                pb.Add(a => a.RenderMode, TableRenderMode.Table);
+                pb.Add(a => a.IsFixedHeader, true);
+                pb.Add(a => a.Items, Foo.GenerateFoo(localizer, 1));
+                pb.Add(a => a.TableColumns, foo => builder =>
+                {
+                    builder.OpenComponent<TableColumn<Foo, string>>(0);
+                    builder.AddAttribute(1, "Field", nameof(Foo.Name));
+                    builder.AddAttribute(2, "FieldExpression", Utility.GenerateValueExpression(foo, nameof(Foo.Name), typeof(string)));
+                    builder.AddAttribute(3, "Width", 100);
+                    builder.CloseComponent();
+
+                    builder.OpenComponent<TableColumn<Foo, string>>(4);
+                    builder.AddAttribute(5, "Field", nameof(Foo.Address));
+                    builder.AddAttribute(6, "FieldExpression", Utility.GenerateValueExpression(foo, nameof(Foo.Address), typeof(string)));
+                    builder.CloseComponent();
+                });
+            });
+        });
+
+        var headerName = cut.Find($".table-fixed-header th[data-bb-field='{nameof(Foo.Name)}']");
+        var headerAddress = cut.Find($".table-fixed-header th[data-bb-field='{nameof(Foo.Address)}']");
+        var bodyName = cut.Find($".table-fixed-body th[data-bb-field='{nameof(Foo.Name)}']");
+        var bodyAddress = cut.Find($".table-fixed-body th[data-bb-field='{nameof(Foo.Address)}']");
+
+        Assert.Contains("width: 100px;", headerName.GetAttribute("style"));
+        Assert.Contains("width: 100px;", bodyName.GetAttribute("style"));
+        Assert.Null(headerAddress.GetAttribute("style"));
+        Assert.Null(bodyAddress.GetAttribute("style"));
+        Assert.Contains("is-width-syncing", cut.Find(".table-fixed-header").ClassList);
+        Assert.Equal("width: calc(100% + 5px);", cut.Find(".table-fixed-header > table").GetAttribute("style"));
     }
 
     [Fact]
@@ -9087,6 +9401,51 @@ public async Task OnTableColumnClientStatusChanged_ResizeColumn_Ok()
         Assert.NotNull(clientState);
     }
 
+    [Fact]
+    public async Task ResizeColumnCallback_PersistMeasuredColumns_Ok()
+    {
+        var localizer = Context.Services.GetRequiredService<IStringLocalizer<Foo>>();
+        var cut = Context.Render<BootstrapBlazorRoot>(pb =>
+        {
+            pb.AddChildContent<Table<Foo>>(pb =>
+            {
+                pb.Add(a => a.RenderMode, TableRenderMode.Table);
+                pb.Add(a => a.IsFixedHeader, true);
+                pb.Add(a => a.AllowResizing, true);
+                pb.Add(a => a.Items, Foo.GenerateFoo(localizer, 1));
+                pb.Add(a => a.TableColumns, foo => builder =>
+                {
+                    builder.OpenComponent<TableColumn<Foo, string>>(0);
+                    builder.AddAttribute(1, "Field", nameof(Foo.Name));
+                    builder.AddAttribute(2, "FieldExpression", Utility.GenerateValueExpression(foo, nameof(Foo.Name), typeof(string)));
+                    builder.CloseComponent();
+
+                    builder.OpenComponent<TableColumn<Foo, string>>(3);
+                    builder.AddAttribute(4, "Field", nameof(Foo.Address));
+                    builder.AddAttribute(5, "FieldExpression", Utility.GenerateValueExpression(foo, nameof(Foo.Address), typeof(string)));
+                    builder.CloseComponent();
+                });
+            });
+        });
+
+        var table = cut.FindComponent<Table<Foo>>();
+        var state = new TableColumnClientStatus
+        {
+            TableWidth = 220,
+            Columns =
+            [
+                new() { Name = nameof(Foo.Name), Visible = true, Width = 120 },
+                new() { Name = nameof(Foo.Address), Visible = true, Width = 100 }
+            ]
+        };
+
+        await cut.InvokeAsync(() => table.Instance.ResizeColumnCallback(nameof(Foo.Name), state));
+
+        Assert.Contains("width: 120px;", table.Find($"th[data-bb-field='{nameof(Foo.Name)}']").GetAttribute("style"));
+        Assert.Contains("width: 100px;", table.Find($"th[data-bb-field='{nameof(Foo.Address)}']").GetAttribute("style"));
+        Assert.Equal("width: 220px;", table.Find(".table-fixed-body > table").GetAttribute("style"));
+    }
+
     [Fact]
     public async Task ClearTableColumnClientStatus_Ok()
     {
@@ -9126,14 +9485,13 @@ public async Task ClearTableColumnClientStatus_Ok()
 
         // 由于启用了客户端持久化 Name 列宽使用 100 而非 80
         var table = cut.FindComponent<Table<Foo>>();
-        var colGroup = table.Find("colgroup");
-        Assert.Contains("style=\"width: 100px;\"", colGroup.ToMarkup());
-        Assert.Contains("style=\"width: 120px;\"", colGroup.ToMarkup());
+        Assert.Contains("width: 100px;", table.Find("th[data-bb-field='Name']").GetAttribute("style"));
+        Assert.Contains("width: 120px;", table.Find("th[data-bb-field='Address']").GetAttribute("style"));
 
         // 清除客户端状态
         await cut.InvokeAsync(() => table.Instance.ClearTableColumnClientStatus());
         invoker.VerifyInvoke("clearColumnStates");
-        Assert.Contains("style=\"width: 80px;\"", colGroup.ToMarkup());
+        Assert.Contains("width: 80px;", table.Find("th[data-bb-field='Name']").GetAttribute("style"));
     }
 
     [Fact]
@@ -9303,7 +9661,7 @@ public void ReloadColumnWidth_Ok(bool fixedHeader)
         Assert.Contains("style=\"width: 220px;\"", table.Markup);
         if (fixedHeader)
         {
-            Assert.Contains("style=\"width: 215px;\"", table.Markup);
+            Assert.Contains("style=\"width: 225px;\"", table.Markup);
         }
     }