如何分离表格元素和操作表格元素，使打印看起来不错？

我试图分开我的动态表在几个部分打印时，也隐藏/更改一些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代码。你现在能够告诉我如何在不同的页面上打破我的表格吗？我希望每个表格标题都有日期和时间可以打印出来。现在我的所有日期都在同一页面上。 –

如何分离表格元素和操作表格元素，使打印看起来不错？

回答

相关问题