使用Bootstrap和CSS的表格内部表格

Question

我是webDevelop的新手。在这里，我有一张桌子，

<div className="row">
      <div className="col-12">
        <div className="table-responsive">
          <table className="table table-hover" id="dashboard">
            <thead>
              <tr className="text-center">
                <th></th>
                <th scope="col">Rname
            </th>
                <th scope="col">Nod
            </th>
                <th scope="col">final score
            </th>
                <th scope="col">Score added today
            </th>
                <th scope="col">Updo Date Final Score
            </th>
              </tr>
            </thead>
            <tbody className="text-center">
              {props.data && props.data.length > 0 && props.data.map((item, key) => {
                return (
                  <tr key={key}>
                    <td align="center">
                      <input type="checkbox" />
                    </td>
                    <td onClick={props.hideTable}>
                      {item.rname}
                      {!props.showTable && <JobsTable jobList={item.jdScoresResponses} />}
                    </td>
                    <td className="font-weight-bold">{item.noOfJds}</td>
                    <td>{item.yesterdaysFinalScore}</td>
                    <td className="font-weight-bold">{item.todaysScore}</td>
                    <td className="font-weight-bold">{item.uptoDateScore}</td>
                  </tr>
                )
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>

现在，这里还有另外一个表格，只需单击td即可打开。因此，我为此使用react.js。因此，现在，我要将此表固定为标头的CSS就像，

#dashboard thead {
  flex: 0 0 auto;
}
#dashboard table {
  display: flex;
  flex-flow: column;
  width: 100%;
}
#dashboard tr {
  width: 100%;
  display: table;
  table-layout: fixed;
}

现在，这里发生了什么，我又添加了一张表格，单击td即可看到该表格。

现在，该表正在获取fixed-width，因为它是固定布局。因此，正因为如此，它只出现在一个td中。那么，对此有什么解决方案吗？有人可以帮我吗？