REACTJS：如何使<th>仅打印一次并与<td>正确对齐

编程问答 2022-06-06

问题描述

我有2个循环以便访问数据。问题是当我将Part 1: AVG Part 2: 1904 Part 3: 20 Part 4: T 放在内部循环之外时，<th>与<th>不对齐，并且如果我将<td>放在内部for循环中，则<th>将重复很多次。

如何使表头<th>仅出现一次并与表数据<th>正确对齐？

下面是代码：（我正在使用ReactJS）

<td>

我为此得到的输出是： https://i.stack.imgur.com/gjNAp.png

因此，如您在上面的屏幕截图中所见，<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> 与<th>不对齐。

我该如何克服？任何帮助深表感谢。非常感谢。

解决方法

尝试遵循documents进行正确的表格式设置（例如p不是tr的有效子元素，等等）。

尝试一下：

    <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>
htmljavascriptreactjsreactjs