locked
Design HTML Report Output Using CSS RRS feed

  • Question

  • Trying to display powershell output by using ConvertTo-Html with CSS style sheet.

    Css sheet defined to display table in fixed width i.e.  table-layout: Fixed;

    But problem here is, all 5 columns displayed in equal column size. Requirement is, need to resize columns in which space is there( in my screenshot, Column Impact,Request Number,No. of Occurrences to be resized and column Errorcode to be expended)

    Pls confirm which settings i have to modify in style sheet 

    $results | ConvertTo-Html -Head $a -Body "<H2> SReport $(get-date)</H2>" | Out-File .\report.html
    $a = "<style>"
    $a = $a + "BODY{background-color:peachpuff;}"
    $a = $a + "TABLE{table-layout: Fixed;width: 100%;border-width: 1px;border-style: solid;border-color:  black;border-collapse: collapse;}"
    $a = $a + "TH{column-width: 20%;border-width: 1px;padding: 8px;border-style: solid;border-color: black;background-color:thistle}"
    $a = $a + "TD{WORD-WRAP:  break-word;column-width: 20%;border-width: 1px;padding: 3px;border-style: solid;border-color: black;background-color:PaleGoldenrod;text-align: center}"
    $a = $a + "</style>"
    

    Wednesday, March 13, 2019 8:00 PM

All replies

  • You will need to add fixed sizes to each column in your CSS. 

    Here is the better way tp write CSS in PowerShell.

    $css = @'
    <style>
        body{
            background-color:peachpuff;
        }
        table{
            table-layout: Fixed;
            width: 100%;
            border-width: 1px;
            border-style: solid;
            border-color:  black;
            border-collapse: collapse;
        }
        th{
            column-width: 20%;
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: black;
            background-color:thistle;
        }
        td{
            word-wrap: break-word;
            column-width: 20%;
            border-width: 1px;
            padding: 3px;
            border-style: solid;
            border-color: black;
            background-color:PaleGoldenrod;
            text-align: center;
        }
    </style>
    '@

    This makes the CSS easier to read and edit and helps us to fin errors. If you use a CSS tool to create the CSS or copy it from a web page then just create the wrapper and paste the CSS text between the @''@.

    The standard for HTML and CSS elements is always lowercase.

    To fix the widths make the header row a fixed width per column.  That means using a tag ID or a class.  This requires editing the HTML by loading it as XML and finding the header components.

    Here are some pointers on how to customize the HTML by editing it as XML.

    http://tech-comments.blogspot.com/search/label/html


    \_(ツ)_/



    Wednesday, March 13, 2019 8:13 PM