Is it possible to change the table structure in mobile device using html css?

Question

I have one table which is displaying proper in desktop. I want to change the layout or structure of table in mobile. Please check below image. I have to display like that. I have to display all the information in one row in mobile.Would you help me in this?

<table>
    <thead>
       <tr>  
           <th>Id</th> 
            <th>Name</th>  
            <th>Email</th>
            <th>Mobile</th>
         </tr>  
      </thead> 
 <tbody>
 <?php
if (isset($result_all_records->num_rows) > 0) {
    // output data of each row
    while($row = $result_all_records->fetch_assoc()) {
        echo "
        <tr>
        <td>{$row['id']}</td>
        <td>{$row['Name']}</td>
        <td>{$row['Email']}</td>
        <td>{$row['Mobile']}</td>
          ";
   }
  }
      else {
    echo "No records found";
}
?>
</tbody> 
</table>

Answer 1

I found the solution from http://codepen.io/anon/pen/QwPVNW

We have to add `data-label='column name' and need to use below code in media queries. it will work

echo "
        <tr>
        <td data-label='id'>{$row['id']}</td>
        <td data-label='Name'>{$row['Name']}</td>
        <td data-label='Email'>{$row['Email']}</td>
        <td data-label='Mobile'>{$row['Mobile']}</td>
          ";


@media only screen and (max-width: 384px) {
table {
      border: 0;
    }

    table thead {
      display: none;
    }

    table tr {
      margin-bottom: 10px;
      display: block;
      border-bottom: 2px solid #ddd;
    }

    table td {
      display: block;
      text-align: left;
      font-size: 13px;
      border-bottom: 1px dotted #ccc;
    }

    table td:last-child {
      border-bottom: 0;
    }

    table td:before {
      content: attr(data-label);
      float: left;
      text-transform: uppercase;
      font-weight: bold;
      margin-right: 20px;
    }
 }