diff --git a/addons/web_editor/static/src/js/backend/convert_inline.js b/addons/web_editor/static/src/js/backend/convert_inline.js
index 28141a8f212..53ab2e47204 100644
--- a/addons/web_editor/static/src/js/backend/convert_inline.js
+++ b/addons/web_editor/static/src/js/backend/convert_inline.js
@@ -225,7 +225,7 @@ function bootstrapToTable($editable) {
                     if (columnIndex === bootstrapColumns.length - 1) {
                         // We handled all the columns but there is still space
                         // in the row. Insert the columns and fill the row.
-                        _applyColspan(grid[gridIndex], 12 - gridIndex);
+                        _applyColspan(grid[gridIndex], 12 - gridIndex, containerWidth);
                         currentRow.append(...grid.filter(td => td.getAttribute('colspan')));
                     }
                 } else if (gridIndex + columnSize === 12) {
diff --git a/addons/web_editor/static/tests/convert_inline_tests.js b/addons/web_editor/static/tests/convert_inline_tests.js
index 3b13f53718f..8d4037984ba 100644
--- a/addons/web_editor/static/tests/convert_inline_tests.js
+++ b/addons/web_editor/static/tests/convert_inline_tests.js
@@ -52,7 +52,7 @@ QUnit.module('convert_inline', {}, function () {
         assert.strictEqual(removeComments(this.$editable.html()),
             getRegularTableHtml(1, 12, 1, 8.33, TEST_WIDTH).slice(0, -8) +
                 `<tr><td colspan="1" style="max-width: ${round(TEST_WIDTH/12)}px;">(0, 12)</td>` +
-                `<td colspan="11"></td></tr></table>`,
+                `<td colspan="11" style="max-width: ${round(TEST_WIDTH*11/12)}px;"></td></tr></table>`,
             "should have converted a 1x13 grid to an equivalent table (overflowing)");
 
         // 1x14
@@ -62,7 +62,7 @@ QUnit.module('convert_inline', {}, function () {
             getRegularTableHtml(1, 12, 1, 8.33, TEST_WIDTH).slice(0, -8) +
                 `<tr><td colspan="1" style="max-width: ${round(TEST_WIDTH/12)}px;">(0, 12)</td>` +
                 `<td colspan="1" style="max-width: ${round(TEST_WIDTH/12)}px;">(0, 13)</td>` +
-                `<td colspan="10"></td></tr></table>`,
+                `<td colspan="10" style="max-width: ${round(TEST_WIDTH*10/12)}px;"></td></tr></table>`,
             "should have converted a 1x14 grid to an equivalent table (overflowing)");
 
         // 1x25
@@ -73,7 +73,7 @@ QUnit.module('convert_inline', {}, function () {
             getRegularTableHtml(1, 12, 1, 8.33, TEST_WIDTH).replace(/\(0, (\d+)\)/g, (s, c) => `(0, ${+c + 12})`)
                 .replace(/^<table[^<]*>/, '').slice(0, -8) +
                 `<tr><td colspan="1" style="max-width: ${round(TEST_WIDTH/12)}px;">(0, 24)</td>` +
-                `<td colspan="11"></td></tr></table>`,
+                `<td colspan="11" style="max-width: ${round(TEST_WIDTH*11/12)}px;"></td></tr></table>`,
             "should have converted a 1x25 grid to an equivalent table (overflowing)");
 
         // 1x26
@@ -85,7 +85,7 @@ QUnit.module('convert_inline', {}, function () {
                 .replace(/^<table[^<]*>/, '').slice(0, -8) +
                 `<tr><td colspan="1" style="max-width: ${round(TEST_WIDTH/12)}px;">(0, 24)</td>` +
                 `<td colspan="1" style="max-width: ${round(TEST_WIDTH/12)}px;">(0, 25)</td>` +
-                `<td colspan="10"></td></tr></table>`,
+                `<td colspan="10" style="max-width: ${round(TEST_WIDTH*10/12)}px;"></td></tr></table>`,
             "should have converted a 1x26 grid to an equivalent table (overflowing)");
     });
     QUnit.test('convert a multi-row regular grid', async function (assert) {
@@ -124,7 +124,7 @@ QUnit.module('convert_inline', {}, function () {
         assert.strictEqual(removeComments(this.$editable.html()),
             getRegularTableHtml(1, 12, 1, 8.33, TEST_WIDTH).slice(0, -8) +
                 `<tr><td colspan="1" style="max-width: ${round(TEST_WIDTH/12)}px;">(0, 12)</td>` +
-                `<td colspan="11"></td></tr>` + // 13 overflowed the row by 1 -> fill up
+                `<td colspan="11" style="max-width: ${round(TEST_WIDTH*11/12)}px;"></td></tr>` + // 13 overflowed the row by 1 -> fill up
                 `<tr><td colspan="12" style="max-width: ${round(TEST_WIDTH)}px;">(1, 0)</td></tr></table>`, // 1 col with no size == col-12
             "should have converted a 2x[13,1] grid to an equivalent table (overflowing)");
 
@@ -134,7 +134,7 @@ QUnit.module('convert_inline', {}, function () {
         assert.strictEqual(this.$editable.html(),
             getRegularTableHtml(2, [1, 12], [12, 1], [100, 8.33], TEST_WIDTH).slice(0, -8) +
                 `<tr><td colspan="1" style="max-width: ${round(TEST_WIDTH/12)}px;">(1, 12)</td>` +
-                `<td colspan="11"></td></tr></table>`, // 13 overflowed the row by 1 -> fill up
+                `<td colspan="11" style="max-width: ${round(TEST_WIDTH*11/12)}px;"></td></tr></table>`, // 13 overflowed the row by 1 -> fill up
             "should have converted a 2x[1,13] grid to an equivalent table (overflowing)");
 
         // 3x[1,13,6]
@@ -143,7 +143,7 @@ QUnit.module('convert_inline', {}, function () {
         assert.strictEqual(this.$editable.html(),
             getRegularTableHtml(2, [1, 12], [12, 1], [100, 8.33], TEST_WIDTH).slice(0, -8) +
                 `<tr><td colspan="1" style="max-width: ${round(TEST_WIDTH/12)}px;">(1, 12)</td>` +
-                `<td colspan="11"></td></tr>` + // 13 overflowed the row by 1 -> fill up
+                `<td colspan="11" style="max-width: ${round(TEST_WIDTH*11/12)}px;"></td></tr>` + // 13 overflowed the row by 1 -> fill up
                 getRegularTableHtml(1, 6, 2, 16.67, TEST_WIDTH).replace(/\(0,/g, `(2,`).replace(/^<table[^<]*>/, ''),
             "should have converted a 3x[1,13,6] grid to an equivalent table (overflowing)");
 
@@ -153,7 +153,7 @@ QUnit.module('convert_inline', {}, function () {
         assert.strictEqual(this.$editable.html(),
             getRegularTableHtml(3, [1, 6, 12], [12, 2, 1], [100, 16.67, 8.33], TEST_WIDTH).slice(0, -8) +
                 `<tr><td colspan="1" style="max-width: ${round(TEST_WIDTH/12)}px;">(2, 12)</td>` +
-                `<td colspan="11"></td></tr>` + // 13 overflowed the row by 1 -> fill up
+                `<td colspan="11" style="max-width: ${round(TEST_WIDTH*11/12)}px;"></td></tr>` + // 13 overflowed the row by 1 -> fill up
                 `</table>`,
             "should have converted a 3x[1,6,13] grid to an equivalent table (overflowing)");
     });
@@ -320,8 +320,7 @@ QUnit.module('convert_inline', {}, function () {
         this.$editable.html('<div class="container"><div class="row"><div class="col-6 offset-4">(0, 0)</div></div>');
         convertInline.bootstrapToTable(this.$editable);
         assert.strictEqual(this.$editable.html(),
-            getTableHtml([[[4, 33.33, ''], [6, 50, '(0, 0)'], [2, 16.67, '']]], TEST_WIDTH)
-                .replace(`<td colspan="2" style="max-width: ${round(TEST_WIDTH*2/12)}px;"></td>`, '<td colspan="2"></td>'),
+            getTableHtml([[[4, 33.33, ''], [6, 50, '(0, 0)'], [2, 16.67, '']]], TEST_WIDTH),
             "should have converted a column with an offset to two columns, then completed the column");
 
         this.$editable.html('<div class="container"><div class="row"><div class="col-6 offset-4">(0, 0)</div><div class="col-6 offset-1">(0, 1)</div></div>');