【无标题】手机端表格自适应

最新推荐文章于 2024-03-30 14:39:01 发布

弱鸡灬

最新推荐文章于 2024-03-30 14:39:01 发布

阅读量343

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/u013557783/article/details/124442982

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      @media screen and (max-width: 600px) {
        table {
          border: 1px solid #ddd;
          padding: 5px;
        }

        table thead {
          display: none;
        }

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

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

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

        table td:before {
          content: attr(data-label);
          float: left;
          text-transform: uppercase;
          font-weight: bold;
        }
      }
    </style>
  </head>
  <body>
    <table width="100%" border="1" cellspacing="0" cellpadding="0">
      <thead>
        <tr>
          <th width="10%">名称</th>
          <th width="30%">内容</th>

          <th width="25">价格</th>
          <th width="15">备注</th>
          <th width="10%">时间</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td data-label="名称">好东西</td>
          <td data-label="内容">万人血书跪求探索</td>

          <td data-label="价格">1999.00</td>
          <td data-label="备注">快来买呀</td>
          <td data-label="时间">2月14日</td>
        </tr>
        <tr>
          <td data-label="名称">好东西</td>
          <td data-label="内容">万人血书跪求探索</td>

          <td data-label="价格">1999.00</td>
          <td data-label="备注">快来买呀</td>
          <td data-label="时间">2月14日</td>
        </tr>
        <tr>
          <td data-label="名称">好东西</td>
          <td data-label="内容">万人血书跪求探索</td>

          <td data-label="价格">1999.00</td>
          <td data-label="备注">快来买呀</td>
          <td data-label="时间">2月14日</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

手机端在这里插入图片描述
web端

弱鸡灬

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【无标题】手机端表格自适应

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <titl
复制链接

扫一扫