Javascript 通过创建水平表的数组进行映射

我试图映射一个数组并动态创建一个水平表，很像下面的图片

我通过这样一个数组进行映射

 const glanceGames = this.state.gameData.map(game => {
        return <GameTable
            key={game.id}
            home_team_name={game.home_name_abbrev}
            away_team_name={game.away_name_abbrev}
            home_score={game.linescore.r.home}
            away_score={game.linescore.r.away}
            status={game.status.status}
        />
    })

然后使用该数据填充以下组件

const GameTable = (props) => {
  return (
    <div>
           <table>
            <thead>
                <tr>
                    <th>{props.status}</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{props.home_team_name}</td>
                    <td>{props.home_score}</td>
                </tr>
                <tr>
                    <td>{props.away_team_name}</td>
                    <td>{props.away_score}</td>
                </tr>
            </tbody>
          </table>
    </div>
)

}

---

但是，输出是一个垂直表，而不是一个水平表。我觉得这应该很容易，但我总是遇到问题。Anu的建议将是有益的！我正在使用React。

我不认为这与React无关，我们可以使用css：

...

render(){
  <div style={{display: 'flex'}}>
    {glanceGames}
  </div>
}

---

thead和tbody应该包装在一个表中，而不是将每个游戏的输出以列表格式占据视图的宽度，我希望所有游戏都放在一行上。