如何分離表格元素和操作表格元素，使打印看起來不錯？

我試圖分開我的動態表在幾個部分打印時，也隱藏/更改一些CSS和HTML輸出。我的表的示例如下：如何分離表格元素和操作表格元素，使打印看起來不錯？

Date   Start Time  End Time  Block 

       08:30 AM  08:45 AM x Available 
01/05/2016 08:45 AM  09:00 AM  Michael Kross 
       09:00 AM  09:15 AM x Available 


       09:30 AM  10:00 AM x Available 
01/06/2016 10:00 AM  10:30 AM x Blocked 
       10:30 AM  11:00 AM x Available 


       11:00 AM  11:45 AM x Blocked 
01/07/2016 11:45 AM  12:30 PM x Available 
       12:30 PM  01:15 PM x Blocked

HTML代碼：

<table> 
    <thead> 
     <tr> 
      <th>Date</th> 
      <th>Start Time</th> 
      <th>End Time</th> 
      <th>Block</th> 
     </tr> 
    </thead> 
     <cfoutput query="qryTable" group="Date"> 
     <tbody> 
      <tr> 
       <td rowspan="#total.recordcount#">#dateFormat(Date,"mm/dd/yyyy")#</td> 
      </tr> 
       <cfoutput> 
       <tr> 
        <td>#StartTime#</td> 
        <td>#EndTime#</td> 
        <td>In this cell I print Name/Available/Block depends on the value from DB</td> 
       </tr> 
       </cfoutput> 
      </tbody> 
     </cfoutput> 
    </table>

所以首先我想打印每個日期與時段每個頁面上單獨與每一頁上的標題。此外，每個x都代表複選框，因此我想在打印頁面時刪除所有複選框，並刪除所有可用的字（僅留下空白空間），並且僅打印出沒有複選框的字塊。我以前在css中沒有任何此類功能的經驗。如果有人能幫助請讓我知道。謝謝。

來源

2016-01-06 espresso_coffee

你有任何圖像？在我看來，我無法「抓住」你想要的前端。某種素描？ – 2016-01-06 16:41:44

我沒有任何圖像，我以前從未使用過打印css。只有我想要的是將每個日期與時間段分開，並在打印時在每個頁面上放置標題。 –

您可以專門使用媒體查詢打印輸出：

@media print { 
    /* Print styles */ 
}

爲了幫助進行可視化，新的Chrome的開發者工具對打印介質的預覽模式。發現它是棘手的，但這裏概述：Using Chrome's Element Inspector in Print Preview Mode?

如何做到具體取決於你如何編碼此頁的HTML部分。爲了回答你的問題，這是獲取你要去的地方的關鍵。

來源

2016-01-06 16:46:48

你是否知道如何防止fieldset在頁面上打印？ –

@ user3023588你可以使用display：none定義一個像.noprint這樣的類。在打印樣式中，並將該類應用於您不想打印的任何內容。 –

我修好了，謝謝。我更新了我的html代碼。你現在能夠告訴我如何在不同的頁面上打破我的表格嗎？我希望每個表格標題都有日期和時間可以打印出來。現在我的所有日期都在同一頁面上。 –

如何分離表格元素和操作表格元素，使打印看起來不錯？

回答

相關問題