M.ver 1+4 x 5 table

What I want the Mobile version of the 1+4 x 5 table to look like.

by ShoeMaker

HTML

<table class="DynaTable">
    <tr class="DynaTableHead">
        <th rowspan="2" class="DynaTableHeadCell-1">col 1</th>
        <th class="DynaTableHeadCell-2">col 2</th>
        <th class="DynaTableHeadCell-3">col 3</th>
        <th class="DynaTableHeadCell-4">col 4</th>
        <th class="DynaTableHeadCell-5">col 5</th>
    </tr>
    <tr class="DynaTableHead">
        <th class="DynaTableHeadCell-X" colspan="3">col 3</th>
    </tr>
    <tr class="DynaTableRow">
        <td rowspan="2" class="DynaTableRowCell-1">cell 1-1</td>
        <td class="DynaTableRowCell-2">cell 1-2</td>
        <td class="DynaTableRowCell-3">cell 1-3</td>
        <td class="DynaTableRowCell-4">cell 1-4</td>
        <td class="DynaTableRowCell-5">cell 1-5</td>
    </tr>
    <tr>
        <td class="DynaTableRowCell-X" colspan="3">cell 1-3</th>
    </tr>
    <tr class="DynaTableRow">
        <td rowspan="2" class="DynaTableRowCell-1">cell 2-1</td>
        <td class="DynaTableRowCell-2">cell 2-2</td>
        <td class="DynaTableRowCell-3">cell 2-3</td>
        <td class="DynaTableRowCell-4">cell 2-4</td>
        <td class="DynaTableRowCell-5">cell 2-5</td>
    </tr>
    <tr>
        <td class="DynaTableRowCell-X" colspan="3">cell 2-3</th>
    </tr>
    <tr class="DynaTableRow">
        <td rowspan="2" class="DynaTableRowCell-1">cell 3-1</td>
        <td class="DynaTableRowCell-2">cell 3-2</td>
        <td class="DynaTableRowCell-3">cell 3-3</td>
        <td class="DynaTableRowCell-4">cell 3-4</td>
        <td class="DynaTableRowCell-5">cell 3-5</td>
    </tr>
    <tr>
        <td class="DynaTableRowCell-X" colspan="4">cell 3-3</th>
    </tr>
    <tr class="DynaTableRow">
        <td rowspan="2" class="DynaTableRowCell-1">cell 4-1</td>
        <td class="DynaTableRowCell-2">cell 4-2</td>
        <td class="DynaTableRowCell-3">cell 4-3</td>
        <td class="DynaTableRowCell-4">cell 4-4</td>
        <td class="DynaTableRowCell-5">cell 4-5</td>
    </tr>
    <tr>
        <td...

CSS

table, th, td {
    border: 1px solid #000;
    border-collapse: collapse;
}
.DynaTable {
    width: 300px;
}
tr.DynaTableHead {
    background-color: #AAA;
}
tr.DynaTableRow {
    text-align: center;
}
th.DynaTableHeadCell-1, td.DynaTableRowCell-1 {
}
th.DynaTableHeadCell-3, td.DynaTableRowCell-3 {
    display: none;
}
th.DynaTableHeadCell-X, td.DynaTableRowCell-X {
    text-align: left;
}