Question

我有这个HTML结构：

<body>
  <header></header>
  <div class='main container'>
    <div class='sidebar'></div>
    <div class='content'>
      <table id='sortthis'></table>
    </div>
  </div>
  <footer></footer>
</body>

但是当我尝试打印预览时，内容会向右侧呈现（这是它在实际页面上的位置）。

如何将此内容集中在一起？或者这是占据页面空间的一些不可见元素的问题吗？我很确定我没有那些。

我将显示的元素设置为最大宽度215.9mm（@page size：legal; margin：12.7mm;）

编辑：

  @media print
    {
    body  * {margin:0; padding:0}
    body, #sortthis {border:1px solid #000;}    
    body header, body footer {display:none;}
    div.main.container div.sidebar {display:none;}
    div.main.container div.content > :not(#sortthis) {display:none;}
    div.main.container div.content > #sortthis {color:#000;}
    #sortthis tbody tr > td.exclude, #sortthis thead tr > th.exclude {display:none;}
    #sortthis {margin:0 auto, padding:0; width:215.9mm;}
    }

  @page {
    size: letter portrait;
    margin: 12.7mm;
    }

Answer 1

您可以设置打印样式表，以便在不影响主要前端样式的情况下更改布局。

例如：

@media print {
   …
}

用于打印网页的CSS

1 个答案: