如何解决REACTJS：如何使<th>仅打印一次并与<td>正确对齐
我有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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
