Responsive table, possible for nested table cell widths to inherit

Question

I've got a responsive table, which has different content in each row and a concertina mechanism on each row.

The concertina essentially adds another table row beneath that current row, which has a td with a colspan for the amount of cells in the table.

Inside this concertina I have another table which I need the table cells to line up with the parent table. I appreciate this probably isn't possible with HTML/CSS alone and probably needs to be done with JS?

Or is there another way?

I can't post all my code here but here is a screenshot of what I mean

<table class="parent-table">
<tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
    <td>Cell 4</td>
    <td>Cell 5</td>
    <td>Cell 6</td>
</tr>
<tr>
    <td colspan="6" class="concertina">
        <div>
            <table>
                <tr>
                    <td>Other 1</td>
                    <td>Other 2</td>
                    <td>Other 3</td>
                    <td>Other 4</td>
                    <td>Other 5</td>
                    <td>Other 6</td>
                </tr>
            </table>
        </div>
    </td>
</tr>

Answer 1

Short answer would be 'No', not possible just with HTML/CSS. I myself am working on a fixed-header, scrollable table with resizable columns, plus double-click column header border to autofit. It's far from complete, and I can tell you if that is roughly the direction you might be heading, you might want to take a deep breath.

UPDATES BELOW

Judging from the screenshot, have you considered revising the HTML structure?

From the markup below, you have multiple <tbody> sections, each with a first <tr> that contains <th> elements. The rest would be showing details data, rows of <tr> that contains typical <td> elements.

In jQuery, you can use $('tr:has(th)') to select the header row, and $('tr:has(td)') to select the data rows.

The last <th> in the header would house your "More/Less" control, which simply shows/hides the subsequent data rows.

Would this work for you instead?

<table class="master-table">
        <tbody class="concertina">
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
                <th>Header 3</th>
                <th>Header 4</th>
                <th>Header 5</th>
                <th>Header 6</th>
                <th>More</th>
            </tr>
            <tr>
                <td>Cell 1</td>
                <td>Cell 2</td>
                <td>Cell 3</td>
                <td>Cell 4</td>
                <td>Cell 5</td>
                <td colspan="2">Cell 6</td>
            </tr>
        </tbody>
        <tbody class="concertina">
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
                <th>Header 3</th>
                <th>Header 4</th>
                <th>Header 5</th>
                <th>Header 6</th>
                <th>More</th>
            </tr>
            <tr>
                <td>Cell 1</td>
                <td>Cell 2</td>
                <td>Cell 3</td>
                <td>Cell 4</td>
                <td>Cell 5</td>
                <td colspan="2">Cell 6</td>
            </tr>
        </tbody>
    </table>

Answer 2

Reset your tables using this bit of CSS:

table {
    border-collapse: collapse;
    border-spacing: 0;
}

Then you will have to set the width of the <td>s