diff --git a/addons/web/static/src/views/list/list_renderer.js b/addons/web/static/src/views/list/list_renderer.js
index 97161e192c7..7442856bdac 100644
--- a/addons/web/static/src/views/list/list_renderer.js
+++ b/addons/web/static/src/views/list/list_renderer.js
@@ -338,7 +338,10 @@ export class ListRenderer extends Component {
         if (this.hasSelectors) {
             nbCols++;
         }
-        if (this.props.activeActions && this.props.activeActions.onDelete) {
+        if (
+            (this.props.activeActions && this.props.activeActions.onDelete) ||
+            this.displayOptionalFields
+        ) {
             nbCols++;
         }
         return nbCols;
diff --git a/addons/web/static/src/views/list/list_renderer.xml b/addons/web/static/src/views/list/list_renderer.xml
index 693aeae2bc3..408745aa0f6 100644
--- a/addons/web/static/src/views/list/list_renderer.xml
+++ b/addons/web/static/src/views/list/list_renderer.xml
@@ -126,7 +126,7 @@
             </tr>
             <t t-if="!props.list.isGrouped">
                 <tr t-foreach="getEmptyRowIds" t-as="emptyRowId" t-key="emptyRowId">
-                    <td t-att-colspan="props.list.editedRecord ? nbCols : nbCols + 1">&#8203;</td>
+                    <td t-att-colspan="nbCols">&#8203;</td>
                 </tr>
             </t>
         </t>
diff --git a/addons/web/static/tests/views/list_view_tests.js b/addons/web/static/tests/views/list_view_tests.js
index d88d3c7e2bc..ee3f5e77821 100644
--- a/addons/web/static/tests/views/list_view_tests.js
+++ b/addons/web/static/tests/views/list_view_tests.js
@@ -3291,9 +3291,8 @@ QUnit.module("Views", (hooks) => {
             resModel: "foo",
             serverData,
             resId: 1,
-            mode: "readonly",
             arch: `
-                    <form>
+                    <form edit="0">
                         <sheet>
                             <field name="foo_o2m">
                                 <tree editable="bottom">
@@ -3303,8 +3302,8 @@ QUnit.module("Views", (hooks) => {
                         </sheet>
                     </form>`,
         });
-        // in readonly mode, the delete action is available and the empty lines should cover that col
-        assert.strictEqual(target.querySelector("tbody td").getAttribute("colspan"), "2");
+        // in readonly mode, the delete action is not available
+        assert.strictEqual(target.querySelector("tbody td").getAttribute("colspan"), "1");
     });
 
     QUnit.test("colspan of empty lines is correct in edit", async function (assert) {
@@ -3333,6 +3332,66 @@ QUnit.module("Views", (hooks) => {
         assert.strictEqual(target.querySelector("tbody td").getAttribute("colspan"), "2");
     });
 
+    QUnit.test(
+        "colspan of empty lines is correct in readonly with optional fields",
+        async function (assert) {
+            serverData.models.foo.fields.foo_o2m = {
+                string: "Foo O2M",
+                type: "one2many",
+                relation: "foo",
+            };
+            await makeView({
+                type: "form",
+                resModel: "foo",
+                serverData,
+                resId: 1,
+                arch: `
+                    <form edit="0">
+                        <sheet>
+                            <field name="foo_o2m">
+                                <tree editable="bottom">
+                                    <field name="int_field"/>
+                                    <field name="foo" optional="hidden"/>
+                                </tree>
+                            </field>
+                        </sheet>
+                    </form>`,
+            });
+            // in readonly mode, the delete action is not available but the optional fields is and the empty lines should cover that col
+            assert.strictEqual(target.querySelector("tbody td").getAttribute("colspan"), "2");
+        }
+    );
+
+    QUnit.test(
+        "colspan of empty lines is correct in edit with optional fields",
+        async function (assert) {
+            serverData.models.foo.fields.foo_o2m = {
+                string: "Foo O2M",
+                type: "one2many",
+                relation: "foo",
+            };
+            await makeView({
+                type: "form",
+                resModel: "foo",
+                serverData,
+                resId: 1,
+                arch: `
+                    <form>
+                        <sheet>
+                            <field name="foo_o2m">
+                                <tree editable="bottom">
+                                    <field name="int_field"/>
+                                    <field name="foo" optional="hidden"/>
+                                </tree>
+                            </field>
+                        </sheet>
+                    </form>`,
+            });
+            // in edit mode, both the delete action and the optional fields are available and the empty lines should cover that col
+            assert.strictEqual(target.querySelector("tbody td").getAttribute("colspan"), "2");
+        }
+    );
+
     QUnit.test(
         "width of some fields should be hardcoded if no data, and list initially invisible",
         async function (assert) {