diff --git a/vue3/src/components/display/IngredientsTable.vue b/vue3/src/components/display/IngredientsTable.vue
index 7ba3a4f87..446af4e2d 100644
--- a/vue3/src/components/display/IngredientsTable.vue
+++ b/vue3/src/components/display/IngredientsTable.vue
@@ -36,11 +36,16 @@
                     <td style="width: 1%; text-wrap: nowrap" class="pa-0 d-print-none" v-if="showCheckbox">
                         <v-checkbox-btn v-model="i.checked" color="success" v-if="!i.isHeader"></v-checkbox-btn>
                     </td>
-                    <td style="width: 1%; text-wrap: nowrap" class="pr-1"
-                        v-html="calculateFoodAmount(i.amount, props.ingredientFactor, useUserPreferenceStore().userSettings.useFractions)" v-if="!i.noAmount"></td>
-                    <td style="width: 1%; text-wrap: nowrap" class="pr-1" v-if="i.noAmount"></td>
+                    <!-- display calculated food amount or empty cell -->
+                    <td style="width: 1%; text-wrap: nowrap"
+                        class="pr-1"
+                        v-html="calculateFoodAmount(i.amount, props.ingredientFactor, useUserPreferenceStore().userSettings.useFractions)"
+                        v-if="!i.noAmount && i.amount != 0">
+                    </td>
+                    <td style="width: 1%; text-wrap: nowrap" class="pr-1" v-else></td>
+
                     <td style="width: 1%; text-wrap: nowrap" class="pr-1">
-                        <template v-if="i.unit && !i.noAmount"> {{ ingredientToUnitString(i, ingredientFactor) }}</template>
+                        <template v-if="i.unit && !i.noAmount && i.amount != 0"> {{ ingredientToUnitString(i, ingredientFactor) }}</template>
                     </td>
                     <td>
                         <template v-if="i.food">