Question

我正在尝试在打印时将我的动态表分成几个部分，也是为了隐藏/更改一些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 code：

<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代表复选框，因此我想删除所有复选框，当我打印我的页面并删除所有单词可用时（只留下空格），并且只打印单词Block而不复选框。我以前没有任何关于css这种功能的经验。如果有人可以提供帮助，请告诉我。谢谢。

Answer 1

您可以专门用于打印输出的媒体查询：

@media print { 
    /* Print styles */
}

为了帮助实现可视化效果，较新的Chrome开发者工具具有打印媒体的预览模式。找到它很棘手，但这里概述了：https://github.com/prettyprint/prettyprint

如何做到这一点在很大程度上取决于您如何编码此页面的HTML部分。要回答你的问题，这是你到达目的地的关键。

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

1 个答案: