React组件中的渲染表存在问题

Question

我正在尝试在React组件中呈现表格，但无法将行与标题对齐

-100.00%

This是我得到的输出

Answer 1

我认为，您正在尝试实现这样的目标。

我已经在codeandbox here中进行了编辑。 https://codesandbox.io/s/sparkling-sound-yd1ih

return (
    <div className="topsearches">
      <table border="2" align="center">
        <thead>
          <th> Search Term </th>
          <th>Count </th>
        </thead>
        <tbody>
          {props.topSearches.map((top_search, index) =>
            Object.keys(top_search).map((key, index) => {
              return (
                <tr>
                  <td>{key}</td>
                  <td>{top_search[key]}</td>
                </tr>
              );
            })
          )}
        </tbody>
      </table>
    </div>
  );

为实现此目的而进行的修改：

• 添加了<thead>
• 已更正的<tbody>循环

如果您还有其他疑问，请告诉我！