是否可以使用html css更改移动设备中的表结构？

娜伦·维玛（Naren Verma）

我有一张桌子在桌面上显示正确。我想在手机中更改表格的布局或结构。请检查下图。我必须这样显示。我必须将所有信息显示在移动设备中的一行中。您能帮我这个忙吗？

<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>

娜伦·维玛（Naren Verma）

我从http://codepen.io/anon/pen/QwPVNW找到了解决方案

我们必须添加`data-label ='列名'，并且需要在媒体查询中使用以下代码。它会工作

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;
    }
 }