只打印一张表Html Css

我正在为一位家庭朋友的项目工作，并且在打印表时它遇到了一个问题，它将所有数据包裹在一个页面中。在我尝试过的所有浏览器（Chrome，Firefox，Safari）中，似乎都是这种情况。表格设置为div（示例代码中的表格），其溢出设置为auto，然后print css设置溢出到可见（这是我发现在搜索问题时发现的），并用no-print类隐藏所有其他元素。它设置为以下只打印一张表Html Css

<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; 
    }

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

所以我能够得到它打印正确，这是因为谷歌材料设计精简造成的问题。我仍然试图找出造成问题的风格。

来源

2016-03-03 Astrea

你能否提供一个有用的html代码？ – raven

是的虽然它有很多的PHP，因为它是从一个SQL数据库使用PHP拉数据，所以我只是简短地交给它的结构 – Astrea

@RobertoDeLaParra什么是'功能的HTML代码'？ – Pogrindis

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

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

来源

2016-03-03 17:06:01 raven

。先生，提高。 – zer00ne

我没有一个问题不希望在那里的表它不是打印表中的所有数据只有一页，这会导致我的表不被打印。 – Astrea

你能分享一个截图吗？你对一个页面有什么意义？表格是分页吗？ – raven

只打印一张表Html Css

回答

相关问题