How to apply @page css role to only one component in react project

Question

I'm using Tailwind with React and I have a React component with a very long table that will be printed over multiple pages, I'm looping over an API response and displaying that table.

I need to add a that will appear on each page of that print. I managed to do that by making that have a fixed position to the bottom, now the problem is that the table appears over that , so I need to add padding-bottom to that printed page to accommodate that footer height, however in order to do that I have to use the @page CSS property, but that role cannot be nested and gets applied to all print pages on the app.

How should I approach this?