自定义HTML报表如何设置边距延伸至页面底部？

需求实现说明 #

这个需求完全可以实现，通过调整HTML表格及父容器的边距、内边距属性即可匹配你要的效果。

具体操作步骤 #

• 调整表格整体外间距
  给包裹表格的外层容器设置外边距，让整个报表和页面边缘留出对应空隙，示例样式如下：

/* 外层容器自定义类，可根据你实际代码的类名修改 */
.report-wrap {
  margin: 24px 32px; /* 上下边距24px、左右边距32px，可根据你要的效果调整数值 */
  padding: 16px; /* 容器内边距，控制容器和表格之间的空隙 */
}

• 调整单元格内边距
  修改表头单元格的内边距，让文字和单元格边框的间距匹配预期效果，你可以直接修改现有letra2类的样式，也可以直接写在标签的style属性中：

.letra2 {
  padding: 10px 14px; /* 上下内边距10px、左右内边距14px，按需调整 */
}

内联写法示例：

<td style="width:5%;padding:10px 14px;" class='letra2'>
  <b>Nro</b>
</td>

• 优化表格边框样式（可选）
  如果需要避免边框重复显示，可给table标签添加边框合并属性：

table {
  border-collapse: collapse;
  margin: 12px 0; /* 控制表格和上下其他内容的间距 */
}

参数调整提示 #

所有边距数值都可以根据你预期的效果微调，多次调试后即可和参考样式完全匹配。

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