diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js b/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js
index 15be69e02cf..fb1c3a3e892 100644
--- a/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js
+++ b/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js
@@ -327,6 +327,7 @@ export class OdooEditor extends EventTarget {
         this.powerboxTablePicker = new TablePicker({
             document: this.document,
             floating: true,
+            getContextFromParentRect: this.options.getContextFromParentRect,
         });
         document.body.appendChild(this.powerboxTablePicker.el);
         this.powerboxTablePicker.addEventListener('cell-selected', ev => {
diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/tablepicker/TablePicker.js b/addons/web_editor/static/src/js/editor/odoo-editor/src/tablepicker/TablePicker.js
index c9e5511550d..00c16ece552 100644
--- a/addons/web_editor/static/src/js/editor/odoo-editor/src/tablepicker/TablePicker.js
+++ b/addons/web_editor/static/src/js/editor/odoo-editor/src/tablepicker/TablePicker.js
@@ -7,6 +7,7 @@ export class TablePicker extends EventTarget {
         this.options = options;
         this.options.minRowCount = this.options.minRowCount || 3;
         this.options.minColCount = this.options.minColCount || 3;
+        this.options.getContextFromParentRect = this.options.getContextFromParentRect || (() => ({ top: 0, left: 0 }));
 
         this.rowNumber = this.options.minRowCount;
         this.colNumber = this.options.minColCount;
@@ -41,11 +42,11 @@ export class TablePicker extends EventTarget {
         const extraRow = 1;
 
         for (let rowNumber = 1; rowNumber <= rowCount + extraRow; rowNumber++) {
-            const rowElement = this.options.document.createElement('div');
+            const rowElement = document.createElement('div');
             rowElement.classList.add('oe-tablepicker-row');
             this.tablePickerElement.appendChild(rowElement);
             for (let colNumber = 1; colNumber <= colCount + extraCol; colNumber++) {
-                const cell = this.options.document.createElement('div');
+                const cell = this.el.ownerDocument.createElement('div');
                 cell.classList.add('oe-tablepicker-cell', 'btn');
                 rowElement.appendChild(cell);
 
@@ -61,9 +62,9 @@ export class TablePicker extends EventTarget {
                             this.render();
                         }
                     });
-                    this.options.document.removeEventListener('mousemove', bindMouseMove);
+                    this.el.ownerDocument.removeEventListener('mousemove', bindMouseMove);
                 };
-                this.options.document.addEventListener('mousemove', bindMouseMove);
+                this.el.ownerDocument.addEventListener('mousemove', bindMouseMove);
                 cell.addEventListener('mousedown', this.selectCell.bind(this));
             }
         }
@@ -133,9 +134,10 @@ export class TablePicker extends EventTarget {
             }
         };
 
+        const parentContextRect = this.options.getContextFromParentRect();
         const offset = getRangePosition(this.el, this.options.document);
-        this.el.style.left = `${offset.left}px`;
-        this.el.style.top = `${offset.top}px`;
+        this.el.style.left = `${parentContextRect.left + offset.left}px`;
+        this.el.style.top = `${parentContextRect.top + offset.top}px`;
 
         const stop = () => {
             this.hide();