<table>
    <caption>Planets</caption>
    <thead>
        <tr>
            <th scope="col">Planet</th>
            <th scope="col">Diameter (km)</th>
            <th scope="col">Length of Day (hours)</th>
            <th scope="col">Mean Temp (C)</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-label="Planet">Mercury</td>
            <td data-label="Diameter (km)">4879</td>
            <td data-label="Length of Day (hours)">4222.6</td>
            <td data-label="Mean Temp (C)">167</td>
        </tr>
        <tr>
            <td data-label="Planet">Venus</td>
            <td data-label="Diameter (km)">12,104</td>
            <td data-label="Length of Day (hours)">2802.0</td>
            <td data-label="Mean Temp (C)">464</td>
        </tr>
        <tr>
            <td data-label="Planet">Mars</td>
            <td data-label="Diameter (km)">6792</td>
            <td data-label="Length of Day (hours)">24.7</td>
            <td data-label="Mean Temp (C)">-65</td>
        </tr>
        <tr>
            <td data-label="Planet">Saturn</td>
            <td data-label="Diameter (km)">120,536</td>
            <td data-label="Length of Day (hours)">10.7</td>
            <td data-label="Mean Temp (C)">-140</td>
        </tr>
    </tbody>
</table>

@media screen and (max-width: 600px) {
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px; }
  
  table tr {
    border-bottom: 3px solid #ddd;
    display: block; }
  
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    text-align: right; }
  
  table td::before {
    content: attr(data-label);
    float: left; }  
  }