利用div也能写出漂亮的表格_div做表格

 需求

Html

<div class="bottom-list">
    <div style="margin-bottom: 3px; font-size: 20px;color: #333;">Payment and Settlement</div>
    <div style=" background:#f9f9f9;display: flex;justify-content: center;">
        <div class="t-b-1">Deposit Amount</div>
        <div class="t-b-1">Balance Amount</div>
        <div class="t-b-1">Supplier's Delivery Time</div>
        <div class="t-b-1">Deposit payment Time</div>
        <div class="t-b-1"><li style="line-height: 40px;">Balance payment Time</li><li style="font-size: 12px;line-height: 0px">( before buyer's picking up at destination )</li></div>
    </div>
    <div style=" background:#fff;display: flex;justify-content: center;">
        <div class="t-b-2">$ 2500</div>
        <div class="t-b-2">$ 1600</div>
        <div class="t-b-2">2020-08-15</div>
        <div class="t-b-2">2020-08-12</div>
        <div class="t-b-2">2020-08-19</div>
    </div>
</div>

CSS

 .bottom-list .t-b-1{
   border: 1px solid #f0f0f0;
   width: 20%;
   height: 50px;
   font-size: 14px;
   text-align: center;
   line-height: 50px;
}
 .bottom-list .t-b-2{
   border: 1px solid #f0f0f0;
   width: 20%;
   height: 50px;
   text-align: center;
   line-height: 50px;
}