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代码
box sizing
.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)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。