html 响应表（来源：https：//codepen.io/geoffyuen/pen/FCBEg）

Posted 2021-05-11

/* TABLE */
.rwd-table {
    margin: 0;
    width: 100%;
    background: #222;
    color: white;
    border-radius: 0;
    overflow: hidden;
    tr {
        border-bottom: 1px rgba(0,0,0,.3) solid;
        border-bottom: 1px rgba(0,0,0,.3) solid;
        border-color: rgba(0,0,0,.3);
        &:nth-child(even) {
            background: #2c2c2c;
        }
    }
    th {
        display: none;
        margin: .5em 1em;
        color: #9d9d9d;
        text-align: left;
        @media (min-width: 992px) {
            padding: 1em !important;
            display: table-cell;
            padding: .25em .5em;
            &:first-child {
                padding-left: 0;
            }
            &:last-child {
                padding-right: 0;
            }
        }
    }
    td {
        display: block;
        margin: .5em 1em;
        text-align: left;
        @media (min-width: 992px) {
            padding: 1em !important;
            display: table-cell;
            padding: .25em .5em;
            &:before {
                display: none;
            }
            &:first-child {
                padding-left: 0;
            }
            &:last-child {
                padding-right: 0;
            }
        }
        &:first-child {
            padding-top: .5em;
        }
        &:last-child {
            padding-bottom: .5em;
        }
        &:before {
            content: attr(data-th) ": ";
            font-weight: bold;
            width: 6.5em;
            display: inline-block;
            color: #9d9d9d;
        }
    }
}

<table class="rwd-table">
  <tr>
    <th>Movie Title</th>
    <th>Genre</th>
    <th>Year</th>
    <th>Gross</th>
  </tr>
  <tr>
    <td data-th="Movie Title">Star Wars</td>
    <td data-th="Genre">Adventure, Sci-fi</td>
    <td data-th="Year">1977</td>
    <td data-th="Gross">$460,935,665</td>
  </tr>
  <tr>
    <td data-th="Movie Title">Howard The Duck</td>
    <td data-th="Genre">"Comedy"</td>
    <td data-th="Year">1986</td>
    <td data-th="Gross">$16,295,774</td>
  </tr>
  <tr>
    <td data-th="Movie Title">American Graffiti</td>
    <td data-th="Genre">Comedy, Drama</td>
    <td data-th="Year">1973</td>
    <td data-th="Gross">$115,000,000</td>
  </tr>
</table>