0

I'm trying to separate my dynamic table in few parts when printing, also to hide/change some css and html output. Example of my table is below: 

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>

So first I would like to print each date with time slots separate on each page with heading on each page. Also each x represent check box, so I would like to remove all check boxes when I'm printing my page and remove all words Available(just leave blank space instead), and only print out word Block without check box. I do not have any previous experience with this kind of features in css. If anyone can help please let me know. Thank you.

espresso_coffee
  • 5,980
  • 11
  • 83
  • 193
  • have you any image? I am not able to 'fetch' in my mind how you want the front-end to be. Some kind of sketch? –  Jan 06 '16 at 16:41
  • I don't have any image, and I never use print css before. Only what I want to is to separate each date with time slots and put heading on each page when printing that out. – espresso_coffee Jan 06 '16 at 16:43

1 Answers1

1

You can use a media query specifically for print output:

@media print { 
    /* Print styles */
}

To help visualize it, newer Chrome's developer tools have a preview mode for print media. Finding it is tricky, but it's outlined here: Using Chrome's Element Inspector in Print Preview Mode?

How to do it specifically depends greatly on how you've coded the HTML portion of this page. To answer your question though, this is key to getting where you're going.

Community
  • 1
  • 1
St.G
  • 454
  • 3
  • 10
  • Do you know by any chance how to prevent fieldset to print on the page? – espresso_coffee Jan 06 '16 at 17:15
  • @user3023588 You could define a class like .noprint with display: none; in the print styles, and apply that class to anything you don't want to print. – St.G Jan 06 '16 at 17:17
  • I fixed that thank you. I updated my html code. Would you be able to give me hint now on how to break my table on different pages? I want each table header with date and time to print out. Now all my dates are on the same page. – espresso_coffee Jan 06 '16 at 18:42
  • You could output each date as a separate table, each with it's own header row. Create a class like .onlyPrint and apply it to those theads. display: hidden in your normal stylesheet and display: block for the print styles. On the table tag add page-break-before: always; in the print styles to make a new page. – St.G Jan 06 '16 at 19:40