CODEWITHSUNDEEP
javascripthtmlreactjs
sanjay srinivasa
sanjay srinivasa

Reputation: 41

REACTJS: how to make <th> print only once and align properly with <td>

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>{item.table_text_data.map((c,j)=> (
     <div>
      <table>
         <tr><th>bottom</th><th>Height</th><th>Left</th><th>Right</th><th>Text</th></tr>
            {c.map((i,k) => { return (
              <p  key={'child' + k}>
             <tr><td>{i.bottom}</td>
              <td>{i.height}</td>
              <td>{i.right}</td>
              <td>{i.left}</td>
              <td>{i.text}</td></tr> 
           </p>
         )})}
       </table>
    </div>))} 
</body>

And the output I'm getting for this is: https://i.sstatic.net/gjNAp.png

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.

Upvotes: 0

Views: 361

Answers (1)

A. Meshu
A. Meshu

Reputation: 4148

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

Try this:

    <div>
        <table>
            <thead>
                <tr>
                    <th>bottom</th>
                    <th>Height</th>
                    <th>Left</th>
                    <th>Right</th>
                    <th>Text</th>
                </tr>
            </thead>
            <tbody>
{item.table_text_data.map((c,j)=> ( {c.map((i,k) => { return (
                <tr key={'child' + k}>
                    <td>{i.bottom}</td>
                    <td>{i.height}</td>
                    <td>{i.right}</td>
                    <td>{i.left}</td>
                    <td>{i.text}</td>
                </tr> 
)})}))} 
           </tbody>
       </table>
    </div>

Upvotes: 2

Related Questions