Laravel maatwebsite/excel FromView导出如何消除两个表格间的行间隙

问题原因 #

你看到的两个表格之间的行间隙，是因为maatwebsite/excel的HTML解析逻辑会自动给每个独立<table>标签的前后各插入一个空白行，拆分两个独立表格就会触发这个默认行为。

解决方法 #

方法1：合并为单个表格（推荐，兼容性最好）

把两个表格的内容合并到同一个<table>标签下，不需要拆分多表格，完全避免间隙问题，修改后的Blade模板参考：

<table>
 <thead>
   <tr>
     <th> Order# </th>
     <th> Customer </th>
     <th> Order Date </th>
     <th> Total </th>
   </tr>
 </thead>
 <tbody>
  <tr>
     <td> 1132 </td> 
     <td> Ashin </td> 
     <td> 21-11-2021 </td> 
     <td> 3000.00$ </td> 
   </tr>
   <!-- 直接拼接第二个表格的所有行 -->
   <tr>
     <th colspan="4"> Order Items </th>
   </tr>
   <tr>
     <th> Product </th>
     <th> Price </th>
     <th> Qty </th>
     <th> Subtotal </th>
   </tr>
  <tr>
     <td> Bag </td> 
     <td> 1200.00$ </td> 
     <td> 2 </td> 
     <td> 2400.00$ </td> 
   </tr>
   <tr>
     <td> Hat </td> 
     <td> 600.00$ </td> 
     <td> 1 </td> 
     <td> 600.00$ </td> 
   </tr>
 </tbody>
</table>

方法2：保留双表格的调整方案

如果业务需要必须拆分两个表格，做两个调整即可：

1. 给表格添加CSS样式清除边距
2. 两个<table>标签之间不要留任何换行、空格，紧挨着书写
   参考代码：

<style>
table {
  margin: 0 !important;
  padding: 0 !important;
  border-spacing: 0;
  border-collapse: collapse;
}
</style>
<table>
 <!-- 第一个表格的所有内容 -->
</table><table>
 <!-- 第二个表格的所有内容，两个table标签之间无任何空白字符 -->
</table>

修改完成后直接导出即可消除间隙。

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