How to Use CSS with HTML in C# for Responsive PDFs

Why Does Choosing the Right CSS Media Type Matter?

IronPDF generates PDFs from HTML in C# and can render a screen stylesheet to PDF by default. This is convenient because print stylesheets are often less well-documented, used, or developed compared to their screen counterparts. However, understanding the distinction between these media types is crucial for producing professional-quality PDFs.

When working with CSS (Screen & Print) in IronPDF, the choice between screen and print media types significantly impacts your final PDF output. Screen media types preserve interactive elements and rich visual designs, while print media types optimize content for readability and paper-based consumption.

CSS3 allows certain CSS styles to be rendered exclusively in printed documents, while others are intended for web browsers. IronPDF can work with either, giving you complete control over how your HTML content is rendered to PDF. This flexibility ensures that whether you're creating digital reports, printable invoices, or hybrid documents, your PDFs meet the specific requirements of their intended use case.

When Should I Use Print vs Screen CSS Media Type?

Create and apply a print stylesheet to your HTML: Learn how to create and apply a perfect print stylesheet..

Each CSS media type targets different use cases. Try each one to see which suits your requirement. Consider these guidelines:

Use Print CSS Media Type when:

• Creating documents intended for physical printing
• Generating invoices, reports, or formal documents
• You need repeated table headers across pages
• Conserving ink is a priority
• Working with Custom Paper Size requirements

Use Screen CSS Media Type when:

• Creating interactive PDFs with rich visual elements
• Preserving web design aesthetics in the PDF
• Including background images and colors
• The PDF will primarily be viewed on screens
• Working with responsive HTML to PDF conversions

What Are the Visual Differences Between Screen and Print Modes?

The examples above demonstrate how the same HTML content renders differently based on the CSS media type selection. Notice how the print version removes decorative images and icons to create a cleaner, more printable document, while the screen version maintains all visual elements for digital viewing.

Why Do Table Headers Only Appear Once in Screen Mode?

When dealing with HTML tables that span multiple pages, set the CssMediaType property to PdfCssMediaType.Print. This ensures that the table header repeats at the top of each extended page. In contrast, PdfCssMediaType.Screen instructs Chrome to print the headers only once. This behavior is particularly important when creating PDF Reports with lengthy data tables.

The print media type activates specific CSS rules that browsers use for pagination, including the thead {display: table-header-group;} property that enables header repetition. This feature is essential for maintaining context when readers flip through multi-page documents.

What HTML Structure Is Required for Repeating Headers?

To ensure Chrome detects the table header, enclose it in a <thead> tag. Let's render the 'tableHeader.html example of repeating table headers' HTML file to PDF to see the effect.

Here's the recommended HTML structure:

<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        <!-- Your table data rows here -->
    </tbody>
</table>

<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        <!-- Your table data rows here -->
    </tbody>
</table>

How Do I Implement Table Header Repetition in C#?

:path=/static-assets/pdf/content-code-examples/how-to/html-to-pdf-responsive-css-table-header.cs

using IronPdf;
using IronPdf.Rendering;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Change the paper size to small
renderer.RenderingOptions.SetCustomPaperSizeinPixelsOrPoints(600, 400);

// Choose screen or print CSS media
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print;

// Render HTML to PDF
PdfDocument pdf = renderer.RenderHtmlFileAsPdf("tableHeader.html");

pdf.SaveAs("tableHeader.pdf");

For more advanced table formatting options, explore Custom Margins to control spacing around your tables, or implement Page Breaks to ensure tables start on new pages when needed.

What Does the Final PDF Output Look Like?