Stack only a single row in a responsive html table

Question

I want to stack only single row in a responsive html table using css.

<table>
    <tbody>
        <tr class="firstrow">
            <td colspan="2">Description 1</td>
            <td colspan="2">Content 1</td>
        </tr>
        <tr>
            <td>Description 2</td>
            <td>Content 2</td>
        </tr>
        <tr>
            <td>Description 3</td>
            <td>Content 3</td>
        </tr>
    </tbody>
</table>

table {
    width: 100%;
    border: 1px grey solid;
}
table td {
    border: 1px lime solid;
}
table .firstrow td {
    display: block;
}

But the stacked row has only the width of one of the following table rows.

If I apply the display: block to all tds in all table rows it spreads the whole width as expected.

How can I get the full width stacking for a single table row?