css用div实现table效果

最近项目需要实现类似table样式,使用div实现了如上图的效果:

 html代码如下

<div class="table-wrapper">
    <div class="table-item">
       <span class="table-title">能量(kcal)</span>
       <span class="table-content">0.00</span>
    </div>
    <div class="table-item">
        <span class="table-title">能量(kcal)</span>
        <span class="table-content">0.00</span>
     </div>
    <div class="table-item">
        <span class="table-title">能量(kcal)</span>
        <span class="table-content">0.00</span>
     </div>
    <div class="table-item">
        <span class="table-title">能量(kcal)</span>
        <span class="table-content">0.00</span>
     </div>
    <div class="table-item">
        <span class="table-title">能量(kcal)</span>
        <span class="table-content">0.00</span>
     </div>
</div>

css代码

.table-wrapper 
      width: 1668px
      border-right: 1px solid rgba(0,0,0,0.10)
      border-top: 1px solid rgba(0,0,0,0.10)
      overflow: hidden
      display: table
      border-radius: 8px
      margin: 8px 0 40px
      box-shadow: inset 1px 1px 0 0 rgba(0,0,0,0.10), inset 0 -1px 0 0 rgba(0,0,0,0.10)
      text-align: left
      .table-item
        display: inline-table
        margin-top: -1px
        /*margin: -1px 0 -1px -1px*/
        .table-title
          box-sizing: border-box
          display: table-cell
          padding: 16px 0 15px 24px
          width: 278px
          height: 100%
          font-size: 24px
          line-height: 33px
          color: rgba(44,49,68,0.60)
          background: #EAEBED
          box-shadow: inset 1px 1px 0 0 rgba(0,0,0,0.10), inset 0 -1px 0 0 rgba(0,0,0,0.10)
        .table-content
          box-sizing: border-box
          display: table-cell
          padding: 16px 0 15px 24px
          font-size: 24px
          line-height: 33px
          color: rgba(44,49,68,0.60)
          width: 278px
          height: 100%
          background: #fff
          box-shadow: inset 1px 1px 0 0 rgba(0,0,0,0.10), inset 0 -1px 0 0 rgba(0,0,0,0.10)

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
下面是一个简单的树形结构表格的示例代码: HTML代码: ```html <div class="table-container"> <table> <thead> <tr> <th>名称</th> <th>大小</th> <th>类型</th> </tr> </thead> <tbody> <tr> <td> <span class="expand"></span> 文件夹1 </td> <td>-</td> <td>文件夹</td> </tr> <tr class="sub-item"> <td> <span class="expand"></span> 文件夹1-1 </td> <td>-</td> <td>文件夹</td> </tr> <tr class="sub-item"> <td> <span class="expand"></span> 文件夹1-2 </td> <td>-</td> <td>文件夹</td> </tr> <tr> <td> <span class="expand"></span> 文件1 </td> <td>10KB</td> <td>文件</td> </tr> <tr> <td> <span class="expand"></span> 文件2 </td> <td>20KB</td> <td>文件</td> </tr> <tr> <td> <span class="expand"></span> 文件3 </td> <td>30KB</td> <td>文件</td> </tr> </tbody> </table> </div> ``` CSS代码: ```css .table-container { overflow: auto; } table { border-collapse: collapse; width: 100%; } thead { background-color: #f5f5f5; } th { padding: 0.5rem; text-align: left; } td, th { border: 1px solid #ddd; padding: 0.5rem; } tr.sub-item { display: none; } tr.sub-item.visible { display: table-row; } span.expand { display: inline-block; width: 16px; height: 16px; margin-right: 5px; background-image: url('https://cdn.icon-icons.com/icons2/1380/PNG/512/vcsconflicting_93497.png'); background-repeat: no-repeat; background-size: contain; cursor: pointer; } tr.parent-row span.expand { background-image: url('https://cdn.icon-icons.com/icons2/1380/PNG/512/vcsnormal_93493.png'); } tr.sub-item span.expand { margin-left: 20px; } ``` JavaScript代码: ```javascript const rows = document.querySelectorAll('.parent-row'); rows.forEach(row => { const expandBtn = row.querySelector('span.expand'); expandBtn.addEventListener('click', () => { row.classList.toggle('expanded'); const subItems = row.nextElementSibling.querySelectorAll('.sub-item'); subItems.forEach(subItem => { subItem.classList.toggle('visible'); }); }); }); ``` 代码解析: 上面的示例代码使用了 divtable 标签来实现树形结构表格。其中,使用 table 标签来定义表格的结构和样式,使用 div 标签来控制表格的滚动。 CSS样式中定义了表格的样式,使用了 display 属性来控制子项的显示和隐藏。使用了 background-image 属性来设置展开和收起按钮的图标。 JavaScript代码中,使用了事件监听器来监听展开和收起按钮的点击事件,根据按钮的状态来显示或隐藏子项。同时,使用了 classList 属性来动态修改表格行的类名,来实现展开和收起的效果

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值