zoukankan      html  css  js  c++  java
  • Grid实现table表格布局


    HTML


          <
    div class="table"> <div class="th"> <div>日期</div> <div>时间</div> <div>主题</div> </div> <div class="td-date"> 2019-07-02(周二) </div> <div class="td"> <div class="td-content"> <div class="item">23:23-12:12</div> <div class="item">小明在回家的路上</div> </div> <div class="td-content"> <div class="item">23:23-12:12</div> <div class="item">小明在上班的路上,发生了什么. 小明在上班的路上,发生了什么.小明在上班的路上,发生了什么.小明在上班的路上,发生了什么.小明在上班的路上,发生了什么.小明在上班的路上,发生了什么.小明在上班的路上,发生了什么.小明在上班的路上,发生了什么.</div> </div> <div class="td-content"> <div class="item">23:23-12:12</div> <div class="item">小明在回家的路上</div> </div> <div class="td-content"> <div class="item">23:23-12:12</div> <div class="item">小明在回家的路上</div> </div> </div> </div>
    CSS  

        .table
    { display: grid; grid-template: '表头 表头 表头'60px '日期 内容 内容'auto / 1fr 1fr 1fr; } .th{ grid-area: 表头; display: grid; grid-template: '表头日期 表头时间 表头主题'60px / 1fr 1fr 1fr; background-color: aqua; text-align: center; line-height: 60px; } .th div:nth-child(2){ border-left: none; border-right: none; } .th div{ border: 1px solid #aaa; } .td-date { grid-area: 日期; display: grid; align-items: center; justify-content: center; border: 1px solid #aaa; border-top: none; } .td { grid-area: 内容; } .td-content{ display: grid; grid-template: '时间 具体内容'minmax(60px, auto) /1fr 1fr; text-align: center; } .item{ display: grid; justify-content: center; align-items: center; border: 1px solid #aaa; border-left: none; border-top: none; }
  • 相关阅读:
    淘宝从几百到千万级并发的十四次架构演进之路!
    19 个强大、有趣、好玩、又装B的 Linux 命令!
    Spring Boot实战:拦截器与过滤器
    初识zookeeper,linux 安装配置zookeeper
    Spring-boot:5分钟整合Dubbo构建分布式服务
    Spring-Boot:6分钟掌握SpringBoot开发
    Dubbo的使用及原理浅析.
    Java消息队列--ActiveMq 初体验
    关于Ubuntu 常用的简单指令
    IBM、HPUX、Solaris不同之处
  • 原文地址:https://www.cnblogs.com/mp1994/p/11121876.html
Copyright © 2011-2022 走看看