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 gotten it to work for the most part, but my problem lies with the columns that span multiple rows not repeating in the mobile view and causing the alignment of the pseudo headers to mess up.

Here is a replication of the HTML I'm using:

<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>
            <td rowspan="2">1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <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>

And the CSS:

<style>

@media only 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;
    }

    thead tr{
        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"; }
    }
}

In the mobile view, the "header" that gets created doesn't line up with what the data is i.e. column "A" data should be "1"

回答1:

.dn {
  display: none;
}


@media only 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;
    }

    thead tr{
        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>
            <td rowspan="2">1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td class='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>

回答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.

来源：https://stackoverflow.com/questions/52880391/responsive-table-display