只打印一張表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

回答

相關問題