Question

我正在为一个家庭朋友做一个项目，我在打印一个表时遇到了一个问题，它只是在一个页面上覆盖了所有数据。在我尝试的所有浏览器中似乎都是这种情况（Chrome，Firefox，Safari）表格设置在div（示例代码中的表格内容）中，溢出设置为auto，然后是print css sets溢出到可见（这是我在搜索问题时发现的）并用非打印类隐藏所有其他元素。它设置如下

    <main> 
      <div class='grid'> 
       <div class='contents'> 
        <div class='table-stuff>
           <table> Lots of data in table</table> 
        </div>
       </div> 
      </div>
     </main>

打印CSS：

 .no-print {
    display: none !important;
  }

 .table-stuff {
    overflow: visible !important;
    float: none !important;
  }

任何帮助将不胜感激，如果需要任何其他信息，我很乐意提供。提前谢谢

所以我能够正确打印它，这是因为谷歌材料设计精简导致了这个问题。我仍在努力寻找导致问题的风格。

Answer 1

尝试在css文件中创建@media。我会做类似的事情：

@media print {
    table.no-print {
        display: none;
    }
}

只打印一张表Html Css

1 个答案: