REACTJS: how to make print only once and align properly with

I have 2 loops in order to access the data. The problem is when I place my <th> outside Inner loop, <th> does not align with <td> and if I place my <th> inside inner for loop, <th> will repeat many times.

how can i make my table header <th> appear only once and align properly with the table data <td>?

here is the code: (I am using ReactJS)

<body>{,j)=> (
            {,k) => { return (
              <p  key={'child' + k}>

And the output I’m getting for this is:

So as you can see in the above screenshot, <th> is not aligned with <td>.

how can i overcome this? any help is much appreciated. Many thanks.


Try to follow the documents about correct table formatting (for example p is not a valid child of tr etc).

Try this:

{,j)=> ( {,k) => { return (
                <tr key={'child' + k}>