html - （Css）表格对齐中的表格：我该如何解决这个问题？

Question

因此，在您单击表格中每一行最左侧的 (+) 图标后，我试图显示一个迷你表格。问题是我的对齐方式完全搞砸了，我已经尝试了十几件事，但仍然无法正常工作。这是我单击 + 号时出现问题的方式：

下面是渲染表格数据的代码：

 const renderTableData = () => {
    return props.data.map((item: any, i: number) => {
      return (
        <tr key={i}>
          <td>
// multiple headers like the checkbox, + sign, etc
           </td>

          {rowList.includes(i) ? (
            <Table striped>
              <tbody>{renderInsideTable(props.details, item)}</tbody>
            </Table>
          ) : null}
        </tr>
      );
    });
  };

对于内表：

const renderInsideTable = (data: any, item: any) => {
    return data.map((dat: any, i: number) => (
      <tr key={i}>
        <td>
          <FormattedMessage id={dat.id} />
        </td>
        <td>{item[dat.id]}</td>
      </tr>
    ));
  };

标签： htmlcssreactjsalignment