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

【问题标题】：Is it possible to change the table structure in mobile device using html css?是否可以使用 html css 更改移动设备中的表结构？
【发布时间】：2017-06-14 07:16:34
【问题描述】：

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

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

【问题讨论】：

您要查找的 Google 关键字是 "responsive tables"。
感谢乔丹先生的回复。我查了谷歌，找到了解决方案

标签： php html css html-table media-queries

【解决方案1】：

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

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

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

【讨论】：