Expanding nested table in Blazor without resizing the main table

I am trying to have a table in Blazor, its first column is clickable and the button expands the row. The inner table is shown underneath the selected row.

Index.razor

@page "/"<table><thead><tr><th/><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr></thead><tbody><ExpandRow/><ExpandRow/></tbody></table><style>    th, td {        border: 1px solid black;        text-align: center;        white-space: nowrap;    }</style>

ExpandRow.razor

@code {    private bool IsExpanded { get; set; } = false;    private void ToggleExpand() { IsExpanded = !IsExpanded; }}<tr><td><button @onclick="() => ToggleExpand()">            @(IsExpanded ? "−" : "+")</button></td><td>Value 1</td><td>Value 2</td><td>Value 3</td></tr>@if (IsExpanded){<td colspan=10><table><thead><tr>                    @for (int i = 0; i < 7; ++i)                    {<th>Inner @i</th>                    }</tr></thead><tbody>                @for (int i = 0; i < 3; ++i)                {<tr>                        @for (int j = 0; j < 7; ++j)                        {<td>1234.5</td>                        }</tr>                }</tbody></table></td>}

The demo is here: https://blazorfiddle.com/s/osbduq9a

But the inner table resizes the main table. I want it to expand beyond the border of the main table. But it seems that since inner table is a child of main table, it cannot be wider.

Is it possible to do?