css动图每日积累

最新推荐文章于 2022-08-30 18:41:03 发布

my sweet heart

最新推荐文章于 2022-08-30 18:41:03 发布

阅读量136

点赞数

分类专栏： css动画效果文章标签： css

本文链接：https://blog.csdn.net/qq_41552648/article/details/125640030

版权

css动画效果专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>【每日一练】20—CSS实现文字动画效果</title>
    <style>
       @media screen and (max-width: 600px) {
  table {
    border: 0;
  }  
  table thead {
    display: none;
  }
  table tr {
    display: block;
    margin-bottom: 10px;
  }
  table td {
    position: relative;
    border-bottom: 1px solid #ddd;
    display: block;
    text-align: right;
  }
  table td::before {
    position: absolute;
    left: 10px;
    content: attr(data-label);
  }
}
    </style>   
</head>
<body>
    <table>
        <caption>Lorem ipsum !</caption>
        <thead>
          <tr>
            <th>Account</th>
            <th>Due Date</th>
            <th>Amount</th>
            <th>Period</th>
          </tr>
        </thead>
        <tbody>
            <tr>
                <td data-label="Account">Visa - 3412</td>
                <td data-label="Due Date">04/01/2016</td>
                <td data-label="Amount">$1,190</td>
                <td data-label="Period">03/01/2016 - 03/31/2016</td>
              </tr>
              <tr>
                <td scope="row" data-label="Account">Visa - 6076</td>
                <td data-label="Due Date">03/01/2016</td>
                <td data-label="Amount">$2,443</td>
                <td data-label="Period">02/01/2016 - 02/29/2016</td>
              </tr>
        </tbody>
      </table>
</body>
</html>