借助HTML table实现发票版式设计 新手效果不符求实现代码

• 拆分3个独立<table>结构做连续发票版式，是效果错位的核心原因：即便每个表格都开启border-collapse: collapse，块级元素的默认边距、不同元素的边框渲染差异，都会导致相邻表格之间出现缝隙、边框错位，根本做不出目标设计的连续实线分割效果
• 直接给整个<table>标签设固定总高的写法存在偏差：浏览器会将设置的总高自动均分分配到所有行单元格上，很容易导致单元格拉伸变形，和目标设计的紧凑版式匹配度极低

目标设计的发票结构本质是单一连续table容器，靠单元格跨行、跨列合并实现分区效果，完全不需要拆分多个独立表格：

• 把抬头区、明细区、备注区所有内容整合到同一个<table>容器内，从根源上消除块级元素间距
• 用rowspan（跨行合并）、colspan（跨列合并）属性实现对应分区的布局：
  • 顶部抬头区（对应原5行3列的布局逻辑）：通过合并单元格划分logo位、公司信息位、发票基础信息位的区块，区域总高度控制为90px
  • 中间明细区（对应原3行8列的布局逻辑）：将表头行、商品列说明行、空白明细行直接接在抬头区后方，靠统一的单元格边框实现连续分割线，表头区域总高度控制为36px
  • 底部备注区（对应原1行1列的满宽布局逻辑）：将整行单元格跨列合并至和明细区同宽，实现和上方区块的边框无缝衔接
• 高度控制逻辑替换：取消给整个table设总高的写法，改为给单个单元格、单行设置对应高度，配合单元格内边距撑开合理的内容空间，从根本上避免单元格拉伸变形

<!DOCTYPE html>
<html>
<head>
<style>
/* 全局重置，清除所有元素默认边距内边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.invoice-wrap {
  width: 100%;
}
.invoice-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #2d2d2d; /* 统一表格外边框 */
}
.invoice-table td {
  border: 1px solid #2d2d2d; /* 统一单元格内边框 */
  padding: 8px;
}
/* 区块高度精准控制 */
.header-section {
  height: 90px; /* 对应设计要求的抬头区总高度 */
}
.detail-head-section {
  height: 36px; /* 对应设计要求的明细表头区总高度 */
}
</style>
</head>
<body>
<div class="invoice-wrap">
  <table class="invoice-table">
    <!-- 顶部抬头区 5行3列布局逻辑 -->
    <tr class="header-section">
      <td rowspan="5" style="width: 20%;">
        <!-- Logo放置位 -->
      </td>
      <td rowspan="3" style="width: 50%;">
        <!-- 公司名称、地址、联系方式 -->
      </td>
      <td style="width: 30%;">发票编号：</td>
    </tr>
    <tr>
      <td>开票日期：</td>
    </tr>
    <tr>
      <td>客户名称：</td>
    </tr>
    <tr>
      <td colspan="2">客户详细地址栏</td>
    </tr>
    <tr>
      <td colspan="2">客户联系信息栏</td>
    </tr>

    <!-- 中间明细区 3行8列布局逻辑 -->
    <tr class="detail-head-section">
      <td>序号</td>
      <td>商品名称</td>
      <td>规格参数</td>
      <td>单位</td>
      <td>数量</td>
      <td>单价</td>
      <td>小计金额</td>
      <td>备注</td>
    </tr>
    <tr>
      <td colspan="8">商品明细空白行</td>
    </tr>
    <tr>
      <td colspan="8">金额合计、税率栏</td>
    </tr>

    <!-- 底部备注区 1行1列满宽布局 -->
    <tr>
      <td colspan="8">开票备注、签章放置位</td>
    </tr>
  </table>
</div>
</body>
</html>

• 不要给独立table单独套边框：统一在table、td层级设置一次边框样式，靠合并单元格实现连续分割线，才能保证所有线条粗细完全一致
• 不要依赖浏览器默认的元素边距：写样式前先做全局margin:0; padding:0重置，避免默认样式导致的布局偏移
• 不要强行拆分独立块级元素做连续边框设计：任何独立的块级元素上下排列时，都会因为渲染逻辑出现难以消除的像素级缝隙，无法实现目标设计的连续实线效果

内容的提问来源于stack exchange，提问作者user15775878