The solution to the issue was to give the outer div { display: table }

Having some CSS issues. I want to keep the Pagination component in a fixed position no matter if the table shrinks in height. When zooming all the way in to the page, the Pagination component will make its way over the top of the table. On further inspection it is because the table is making its way outside of its outer div vertically. I have tried looking at other peoples examples however they do not solve this issue. FYI the {row} variable produces 10 rows of data.

Thanks!

           <div style = {{height: "400px"}}>

               <table style={{width:"100%", textAlign: "center", tableLayout: "fixed"}}>
                    <tbody>
                        <tr style = {{border: "solid black 1px"}}>
                            <th>Product Name</th>
                            <th>Product Code</th> 
                            <th>Price</th>
                            <th>Units Sold</th>
                            <th>Category</th> 
                            <th>Number in Stock</th>
                            <th>+</th>
                        </tr>
                        {row}
                    </tbody>
                </table>  

            </div>

            <div style = {{textAlign: "center"}}>
                <Pagination/>
            </div>