如何通过CSS实现网页表格多列布局？网页空间优化及打印省纸方案咨询

问题2：其他最大化空间利用率、减少打印用纸的优化建议 #

除了你已经想到的字体调整和列数优化，还有这些实用技巧：

• 用打印媒体查询针对性优化：专门为打印场景调整样式，不影响网页正常显示：

  @media print {
    /* 移除页面边距，最大化利用纸张 */
    body {
      margin: 0;
      padding: 8px;
    }
    /* 去掉背景色，节省墨水同时避免打印时的背景干扰文字 */
    * {
      background-color: transparent !important;
      color: #000 !important;
    }
    /* 隐藏不需要打印的元素（比如你的.button类） */
    .button {
      display: none;
    }
    /* 压缩水平线高度，减少空白占比 */
    hr {
      height: 1px;
      margin: 10px 0;
    }
  }
  

• 清理冗余内容：页面里有重复的<style>标签和空的<tr>，可以直接删除；如果无法修改HTML，也可以用CSS隐藏空行：

  tr:empty {
    display: none;
  }
  

• 优化表格紧凑度：合并表格边框，缩小单元格内边距：

  table {
    border-collapse: collapse;
    width: 100%;
  }
  td {
    padding: 2px 4px; /* 缩小单元格内边距，让内容更紧凑 */
  }
  

• 调整行高：除了缩小字体，适当减小行高也能大幅节省纵向空间：

  body {
    line-height: 1.2; /* 默认行高是1.5，缩小后内容更紧凑 */
  }
  

• 避免分页断裂：用CSS控制打印时的分页逻辑，防止单个快捷键条目被拆分到两页：

  @media print {
    div {
      page-break-inside: avoid;
    }
  }
  

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