diff --git a/addons/web/static/src/views/list/list_renderer.js b/addons/web/static/src/views/list/list_renderer.js
index 0d90273beb4..c9dee1fe045 100644
--- a/addons/web/static/src/views/list/list_renderer.js
+++ b/addons/web/static/src/views/list/list_renderer.js
@@ -591,7 +591,11 @@ export class ListRenderer extends Component {
                 classNames.push("o_list_button");
             } else if (column.type === "field") {
                 classNames.push("o_field_cell");
-                if (column.rawAttrs && column.rawAttrs.class) {
+                if (
+                    column.rawAttrs &&
+                    column.rawAttrs.class &&
+                    this.canUseFormatter(column, record)
+                ) {
                     classNames.push(column.rawAttrs.class);
                 }
                 const typeClass = FIELD_CLASSES[this.fields[column.name].type];
@@ -639,6 +643,10 @@ export class ListRenderer extends Component {
         }
     }
 
+    getFieldClass(column) {
+        return column.rawAttrs && column.rawAttrs.class;
+    }
+
     getFormattedValue(column, record) {
         const fieldName = column.name;
         const field = this.fields[fieldName];
diff --git a/addons/web/static/src/views/list/list_renderer.xml b/addons/web/static/src/views/list/list_renderer.xml
index ccf5fd68ddd..ccaac21ce05 100644
--- a/addons/web/static/src/views/list/list_renderer.xml
+++ b/addons/web/static/src/views/list/list_renderer.xml
@@ -183,7 +183,7 @@
                     <td t-on-keydown.synthetic="(ev) => this.onCellKeydown(ev, group, record)" class="o_data_cell" t-att-name="column.name" t-att-class="getCellClass(column, record)" t-att-data-tooltip="getCellTitle(column, record)" data-tooltip-delay="1000" t-on-click="(ev) => this.onCellClicked(record, column, ev)" tabindex="-1">
                         <t t-if="!evalModifier(column.modifiers.invisible, record)">
                             <t t-if="canUseFormatter(column, record)" t-esc="getFormattedValue(column, record)"/>
-                            <Field t-else="" name="column.name" record="record" type="column.widget" fieldInfo="props.archInfo.fieldNodes[column.name]" setDirty="(isDirty) => this.setDirty(isDirty)"/>
+                            <Field t-else="" name="column.name" record="record" type="column.widget" class="getFieldClass(column)" fieldInfo="props.archInfo.fieldNodes[column.name]" setDirty="(isDirty) => this.setDirty(isDirty)"/>
                         </t>
                     </td>
                 </t>
diff --git a/addons/web/static/tests/views/list_view_tests.js b/addons/web/static/tests/views/list_view_tests.js
index 1d293533988..3b27383c03d 100644
--- a/addons/web/static/tests/views/list_view_tests.js
+++ b/addons/web/static/tests/views/list_view_tests.js
@@ -14478,4 +14478,39 @@ QUnit.module("Views", (hooks) => {
 
         assert.verifySteps(["create"]);
     });
+    QUnit.test(
+        "classNames given to a field are set on the right field directly",
+        async function (assert) {
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                <tree editable="bottom">
+                    <field class="d-flex align-items-center" name="int_field" widget="progressbar" options="{'editable': true}" />
+                    <field class="d-none" name="bar" />
+                </tree>`,
+            });
+            assert.doesNotHaveClass(
+                target.querySelector(".o_field_cell:nth-child(2)"),
+                "d-flex align-items-center",
+                "classnames are not set on the first cell"
+            );
+            assert.hasClass(
+                target.querySelector(".o_field_progressbar"),
+                "d-flex align-items-center",
+                "classnames are set on the corresponding field div directly"
+            );
+            assert.doesNotHaveClass(
+                target.querySelector(".o_field_cell:nth-child(3)"),
+                "d-none",
+                "classnames are not set on the second cell"
+            );
+            assert.hasClass(
+                target.querySelector(".o_field_boolean"),
+                "d-none",
+                "classnames are set on the second field div directly"
+            );
+        }
+    );
 });