How to make sub table <tr> of parent table <tr>?

Question

I know that maybe this question can be confusing for you, but I will try to explain in more detail.

First: I have this api

   {
    "data": [
        {
            "id": 1,
            "title": "Действие 1",
            "subactions": [
                {
                    "id": 2,
                    "title": "Субдействие 1",
                    "status": {
                        "id": 1,
                        "text": "Выполнено"
                    },
                    "countries": [
                        "kz",
                        "kg"
                    ],
                    "theme": {
                        "id": 1,
                        "text": "Изменение климата"
                    },
                    "characteristics": {
                        "0": "Другие действия",
                        "id": 1
                    },
                    "monthes": [
                        {
                            "month": 1,
                            "year": 2017,
                            "complete": 0
                        },
                        {
                            "month": 2,
                            "year": 2017,
                            "complete": 1
                        },
                        {
                            "month": 3,
                            "year": 2017,
                            "complete": 1
                        },
                        {
                            "month": 4,
                            "year": 2017,
                            "complete": 1
                        },
                        {
                            "month": 5,
                            "year": 2017,
                            "complete": 1
                        },
                        {
                            "month": 1,
                            "year": 2018,
                            "complete": 0
                        },
                        {
                            "month": 2,
                            "year": 2018,
                            "complete": 0
                        }
                    ]
                }
            ]
          }

The second: the table should look like in this picture

The third: The problem is that I don not know how to loop <tr> as child of another <tr> parent.

The Fourth: This my attempts of doing that

 {
        task.map((value, i) => {
            if(value.subactions !== undefined){
                return (
                    value.subactions.map((subaction, i) => {
                        return (
                            <div>
                                {/*Parent tr*/}
                                <tr key={i}>
                                    <td>{value.id}</td>
                                    <td>{value.title}</td>
                                </tr>
                                {/* end Parent tr*/}

                                {/*sub table of parent tr*/}
                                <tr key={i}>
                                    <td>{subaction.id}</td>
                                    <td>{subaction.title}</td>
                                    <td>{subaction.status.text}</td>
                                    <td>
                                        {subaction.countries.map((country, i) => {
                                            return (
                                                i == subaction.countries.length - 1 ?
                                                    <span key={i}>{country} </span> :
                                                    <span key={i}> {country},</span>
                                            )
                                        })
                                        }
                                    </td>
                                    <td></td>
                                    <td>{subaction.theme.text}</td>
                                    <td>{subaction.characteristics[0]}</td>

                                    {subaction.monthes.map((month, i) => {
                                        return (
                                            month.complete ?
                                                <td className='task-month task-end'>
                                                    <input
                                                        type="checkbox"

                                                        className="css-checkbox lrg"/>
                                                    <label htmlFor="checkbox69" name="checkbox69_lbl"
                                                           className="css-label lrg vlad"/>
                                                </td> : <td></td>

                                        )
                                    })
                                    }

                                </tr>

                                {/*end sub table of parent tr*/}

                            </div>

                        )
                    })
                )
            } else {
                return undefined
            }
        })
    }

Please, anyone help to point out of my mistakes.

Answer 1

Replace div tag to table tag and In you parent table at second td use colspan="(total number of td in your second tr) - 2"

check below changes , I have mentioned the colspan count :

task.map((value, i) => {
                                    if(value.subactions !== undefined){
                                        return (
                                            value.subactions.map((subaction, i) => {
                                                return (
                                                    <table>
                                                        {/*Parent tr*/}
                                                        <tr key={i}>
                                                            <td>{value.id}</td>
                                                            <td colspan="1+totalContriesCount+2+totalMonthsCount">{value.title}</td>
                                                        </tr>
                                                        {/* end Parent tr*/}

                                                        {/*sub table of parent tr*/}
                                                        <tr key={i}>
                                                            <td>{subaction.id}</td>
                                                            <td>{subaction.title}</td>
                                                            <td>{subaction.status.text}</td>
                                                            <td>
                                                                {subaction.countries.map((country, i) => {
                                                                    return (
                                                                        i == subaction.countries.length - 1 ?
                                                                            <span key={i}>{country} </span> :
                                                                            <span key={i}> {country},</span>
                                                                    )
                                                                })
                                                                }
                                                            </td>
                                                            <td></td>
                                                            <td>{subaction.theme.text}</td>
                                                            <td>{subaction.characteristics[0]}</td>

                                                            {subaction.monthes.map((month, i) => {
                                                                return (
                                                                    month.complete ?
                                                                        <td className='task-month task-end'>
                                                                            <input
                                                                                type="checkbox"

                                                                                className="css-checkbox lrg"/>
                                                                            <label htmlFor="checkbox69" name="checkbox69_lbl"
                                                                                   className="css-label lrg vlad"/>
                                                                        </td> : <td></td>

                                                                )
                                                            })
                                                            }

                                                        </tr>

                                                        {/*end sub table of parent tr*/}

                                                    </table>

                                                )
                                            })
                                        )
                                    } else {
                                        return undefined
                                    }
                                })
                            }

Answer 2

Try making the parent row span to the maximum so you might achieve the output

<tr>
    <td rowspan="maxRowCount"></td>
    <td colspan="1"></td>
</tr>