Responsive Table Display

I'm trying to make a table display more responsively. I've tried following CSS-tricks ( https://css-tricks.com/responsive-data-tables/) method for the two column layout, and have

Solution 1:

.dn {
  display: none;
}


@mediaonly screen and (max-width: 760px),(min-device-width: 768px) and (max-device-width: 1024px)  {

    table, thead, tbody, th, td, tr { 
    display: block; 
    }

    th {
    color: #ffffff;
    font-weight: bold;
    }

    theadtr{
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    td {
        border: none;
        border-bottom: 1px solid rgb(221, 221, 221);
        position: relative;
        padding-left: 30%;
        text-align: left;
        white-space: normal;
    }       

    td:before { 
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%; 
    padding-right: 10px; 
    white-space: normal;
    }

    td:nth-of-type(1):before { content: "A"; }
    td:nth-of-type(2):before { content: "B"; }
    td:nth-of-type(3):before { content: "C"; }
    td:nth-of-type(4):before { content: "D"; }
    td:nth-of-type(5):before { content: "E"; }
    }
}

<table><thead><tr><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th></tr></thead><tbody><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr><tr><tdrowspan="2">1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr><tr><tdclass='dn'>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr></tbody></table>

Solution 2:

I think the [rowspan="2"] attribute may causing you problems.

At third "tr" tag of "tbody" tag a Column is missing.

Sorry my bad english.