html - 如何分离表格元素和操作表格元素以使打印看起来好看？

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代码:

<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 开发者工具提供了打印媒体预览模式。找到它很棘手，但此处概述了它:Using Chrome's Element Inspector in Print Preview Mode?

具体如何操作在很大程度上取决于您对该页面的 HTML 部分进行编码的方式。不过，要回答您的问题，这是到达目的地的关键。