diff --git a/src/BootstrapBlazor.Server/Components/Samples/Table/TablesFixedColumn.razor b/src/BootstrapBlazor.Server/Components/Samples/Table/TablesFixedColumn.razor
index cc37d71bc8c..90df4a6069b 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/Table/TablesFixedColumn.razor
+++ b/src/BootstrapBlazor.Server/Components/Samples/Table/TablesFixedColumn.razor
@@ -15,15 +15,16 @@
@((MarkupString)Localizer["TablesFixedColHeaderDescription"].Value)
@@ -34,7 +35,7 @@
Name="FixedColTableHeader">
Fixed attribute to fix the header",
- "TablesFixedColHeaderDescription": "In this example, set Name DateTime Complete The first two columns and the last column are fixed columns, and the middle columns are scrolled horizontally",
+ "TablesFixedColHeaderDescription": "In this example, set Name Education Count Complete The first two columns and the last column are fixed columns, and the middle columns are scrolled horizontally",
"TablesFixedColTableHeaderTitle": "Fixed headers and columns",
"TablesFixedColTableHeaderIntro": "Set IsFixedHeader=\"true\" to fix the header, set Fixed to fix the column",
"TablesFixedExtendButtonsColumnTitle": "Fixed button action column",
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
index 136b5dac7f5..b31b50a7c7c 100644
--- a/src/BootstrapBlazor.Server/Locales/zh-CN.json
+++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -83,7 +83,7 @@
"TablesFixedColumnNote": "固定列用法请尽可能的设置固定列宽度,本页面如果宽度过长,请 F12 人为减小可视页面宽度",
"TablesFixedColHeaderTitle": "固定列头与列尾",
"TablesFixedColHeaderIntro": "设置 Fixed 属性固定表头",
- "TablesFixedColHeaderDescription": "本例中设置 Name DateTime Complete 前两列和最后一列为固定列,中间各列进行水平滚动",
+ "TablesFixedColHeaderDescription": "本例中设置 Name Education Count Complete 前两列和最后一列为固定列,中间各列进行水平滚动,本例中设置 AllowResize=\"true\" 固定列也可以调整宽度",
"TablesFixedColTableHeaderTitle": "固定表头与列",
"TablesFixedColTableHeaderIntro": "设置 IsFixedHeader=\"true\" 固定表头,设置 Fixed 对列进行固定",
"TablesFixedExtendButtonsColumnTitle": "固定按钮操作列",
diff --git a/src/BootstrapBlazor/Components/Table/Table.razor b/src/BootstrapBlazor/Components/Table/Table.razor
index d2eb49b8845..dc43d634afa 100644
--- a/src/BootstrapBlazor/Components/Table/Table.razor
+++ b/src/BootstrapBlazor/Components/Table/Table.razor
@@ -602,7 +602,7 @@
}
- @if (!col.Fixed && AllowResizing)
+ @if (AllowResizing)
{
}
diff --git a/src/BootstrapBlazor/Components/Table/Table.razor.js b/src/BootstrapBlazor/Components/Table/Table.razor.js
index 600f2ca65fc..7a2d55c18b3 100644
--- a/src/BootstrapBlazor/Components/Table/Table.razor.js
+++ b/src/BootstrapBlazor/Components/Table/Table.razor.js
@@ -586,9 +586,10 @@ const setResizeListener = table => {
const marginX = eventX - originalX
table.tables.forEach(t => {
const group = [...t.children].find(i => i.nodeName === 'COLGROUP')
+ const calcColWidth = colWidth + marginX;
if (group) {
const curCol = group.children.item(colIndex)
- curCol.style.width = `${colWidth + marginX}px`
+ curCol.style.setProperty('width', `${calcColWidth}px`);
const tableEl = curCol.closest('table')
let width = tableWidth + marginX
if (t.closest('.table-fixed-body')) {
@@ -606,6 +607,22 @@ const setResizeListener = table => {
tip.update();
}
}
+
+ const header = col.parentElement;
+ if (header.classList.contains('fixed')) {
+ resizeNextFixedColumnWidth(header, calcColWidth);
+ }
+ }
+
+ 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.classList.contains('fixed')) {
+ resizeNextFixedColumnWidth(header, calcColWidth);
+ }
+ });
}
})
},
@@ -624,6 +641,25 @@ const setResizeListener = table => {
})
}
+const resizeNextFixedColumnWidth = (col, width) => {
+ if (col.classList.contains('fixed-right')) {
+ const nextColumn = col.previousElementSibling;
+ if (nextColumn.classList.contains('fixed')) {
+ const right = parseFloat(col.style.getPropertyValue('right'));
+ nextColumn.style.setProperty('right', `${right + width}px`);
+ resizeNextFixedColumnWidth(nextColumn, nextColumn.offsetWidth);
+ }
+ }
+ else if (col.classList.contains('fixed')) {
+ const nextColumn = col.nextElementSibling;
+ if (nextColumn.classList.contains('fixed')) {
+ const left = parseFloat(col.style.getPropertyValue('left'));
+ nextColumn.style.setProperty('left', `${left + width}px`);
+ resizeNextFixedColumnWidth(nextColumn, nextColumn.offsetWidth);
+ }
+ }
+}
+
const setColumnResizingListen = (table, col) => {
if (table.options.showColumnWidthTooltip) {
EventHandler.on(col, 'mouseenter', e => {
diff --git a/src/BootstrapBlazor/Components/Table/Table.razor.scss b/src/BootstrapBlazor/Components/Table/Table.razor.scss
index 84edf7146c5..7a98b97fd36 100644
--- a/src/BootstrapBlazor/Components/Table/Table.razor.scss
+++ b/src/BootstrapBlazor/Components/Table/Table.razor.scss
@@ -384,6 +384,10 @@
overflow: hidden;
}
+td > .table-cell {
+ overflow: hidden;
+}
+
.table tbody td .table-cell:not(.is-wrap) {
white-space: nowrap;
}
@@ -555,10 +559,6 @@ tr.active:not(.is-edit):hover {
pointer-events: none;
}
-.table-fixed-column .table .fixed-right {
- border-right: inherit;
-}
-
.table-fixed-column .table .fixed-right.fl {
border-left: 1px solid var(--bb-table-column-fixed-border-color);
}