REACTJS：如何制作<th>只打印一次并正确对齐<td>

Question

我有 2 个循环来访问数据。 问题是当我将<th>放在 Inner 循环之外时， <th>与<td>不对齐，如果我将我的<th>放在内部 for 循环中， <th>将重复多次。

我怎样才能让我的表头<th>只出现一次并与表数据<td>正确对齐？

这是代码：（我正在使用 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>

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

所以正如你在上面的截图中看到的， <th>没有与<td>对齐。

我怎样才能克服这个？ 任何帮助深表感谢。 非常感谢。

Answer 1

尝试遵循有关正确表格格式的文档（例如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>

REACTJS：如何制作<th>只打印一次并正确对齐<td>

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-10-28 12:20:40

REACTJS：如何制作<th>只打印一次并正确对齐<td>

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-10-28 12:20:40

解决方案1
2 已采纳 2020-10-28 12:20:40