如何创建具有 4 个子列的 React 引导表

Question

我正在使用反应引导表这里

我想创建一个看起来像这样的表。

我的数据是这样的

const data = [
      {
        rollId: 1,
        name:"Momo",
        marks: {
          maths: 30,
          english:24,
          science:50,
          arts:10
        },
        age:14
      },
      {
        rollId: 2,
        name:"Sana",
        marks: {
          maths: 30,
          english:24,
          science:50,
          arts:10
        },
        age:14
      },
      {
        rollId: 3,
        name:"Mark",
        marks: {
          maths: 30,
          english:24,
          science:50,
          arts:10
        },
        age:14
      }
    ]

我使用了以下代码

<>
      <Table
        striped
        bordered
        hover
        responsive
        bgcolor="white"
        size="lg"
        style={{ opacity: "0.8" }}
      >
        <thead
          style={{ backgroundColor: "#198754" }}
          className="text-white text-center"
        >
          <tr>


            <th rowSpan={2}>Roll ID</th>
            <th rowSpan={2}>Name</th>

            <th rowSpan={2} colSpan={4} >
              <tr>
                <th colSpan={4} rowSpan={1}>Marks Obtained</th>
              </tr>
              <tr>
                <th rowSpan={1} colSpan={1}>Maths</th>
                <th rowSpan={1} colSpan={1}>English </th>
                <th rowSpan={1} colSpan={1}>Science</th>
                <th rowSpan={1} colSpan={1}>Arts</th>
              </tr>
            </th>
            <th rowSpan={2}>Age</th>

          </tr>
        </thead>
        <tbody>
          {data.map((dat) => {
            return (
              <tr key={dat.rollId}>
                <td key={dat.rollId}>{dat.rollId}</td>

                <td>{dat.name}</td>

                <td>{dat.marks.maths}</td>
                <td>{dat.marks.english}</td>
                <td>{dat.marks.science}</td>
                <td>{dat.marks.arts}</td>

                <td >{dat.age}</td>


              </tr>
            );
          })}
        </tbody>
      </Table>
    </>

通过上面的代码，目前它看起来像这样

您可以看到它没有在 4 列中显示科目（数学、英语、科学、艺术）。

如何在 4 列中显示它们？？