纯html+css写一个收款收据或者发票样式

效果图

代码部分

<div style="width:960px;margin:0 auto;padding:10px;display:flex;align-items:center;color:#000">
    <div style="width: 100%;">
      <div style="text-align:center;font-size:24px;font-weight:bold;color:red">XXXXXX收款收据</div>
      <div
        style="display:flex;align-items:center;justify-content:space-around;width:100%;height:40px;"
      >
        <div>
          <span>2021</span>
          <span style="color:red">年</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span>11</span>
          <span style="color:red">月</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span>18</span>
          <span style="color:red">日</span>
        </div>
        <div>
          NO：
          <span style="color:#9C5223;font-weight:bold">0123456</span>
        </div>
      </div>

      <div style="display:flex;align-items:center">
        <table border="1" style="width: 95%; border-collapse: collapse;border:1px solid red">
          <tr class="tempTr">
            <td style="color:red">缴款人</td>
            <td colspan="3" style="width: 40%;">张三</td>
            <td style="color:red">门店名称</td>
            <td colspan="3" style="width: 40%;">十亩地</td>
          </tr>
          <tr class="tempTr">
            <td style="width: 20%;color:red">租户类型</td>
            <td style="width: 10%;color:red">门牌号</td>
            <td style="width: 10%;color:red">建筑面积</td>
            <td style="width: 10%;color:red">单价</td>
            <td style="width: 10%;color:red">月租金</td>
            <td style="width: 10%;color:red">应收租金</td>
            <td style="width: 10%;color:red">押金</td>
            <td style="width: 20%;color:red">总金额(元)</td>
          </tr>
          <tr class="tempTr">
            <td>整租</td>
            <td>1818</td>
            <td>120</td>
            <td>3</td>
            <td>4000</td>
            <td>8000</td>
            <td>4000</td>
            <td>12000</td>
          </tr>
          <tr class="tempTr">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr class="tempTr">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr class="tempTr" style="line-height:30px">
            <td colspan="6">
              <span style="color:red">合计金额（大写）：</span>
              <span>壹万贰仟叁佰肆拾贰伍圆陆角柒分</span>
            </td>
            <td colspan="2">
              <span style="color:red">小写：</span>
              <span>1234567</span>
            </td>
          </tr>
          <tr class="tempTr">
            <td style="color:red" colspan="2">缴费期</td>
            <td colspan="6">2021-11-24</td>
          </tr>
        </table>
        <div style="text-align:center;width:5%;">
          第
          <br />一
          <br />联
          <br />：
          <br />收
          <br />据
        </div>
      </div>
      <div style="width:95%;display:flex;height:40px;line-height:40px;color:red">
        <div style="width:33.33%;padding-left:10px">
          收款单位(盖章)：
          <span style="color:#000">人生无限有限公司</span>
        </div>
        <div style="width:33.33%;padding-left:10px">
          收款人：
          <span style="color:#000">大神</span>
        </div>
        <div style="width:33.33%;padding-left:10px">
          交款人：
          <span style="color:#000">李四</span>
        </div>
      </div>
    </div>
  </div>

<style scoped>
.tempTr td {
  height: 30px;
  text-align: center;
}
</style>

描述

采用内联样式居多，若其他的有区别自行调整。