Hi all,

I'm developing my first HTML 5 application, and it's my first web app in quite some time. I was excited to start using HTML 5 because I was under the impression that it used a lot of "generic" components that was universally accepted across platforms and browsers. I still seem to be running into issues though. My latest one includes printing a gridview. I'm just looking for a solution that will work across multiple browsers, to print gridviews with page breaks and headers that carry from page to page. I found this javascript code below, and when testing it against Chrome and Internet Explorer, it produces two different results:

I'm using the following css:
HTML Code:
    <style type="text/css">
        .HeaderStyle
        {
            padding: 10px;
            background-color: #1C3A70;
            color: White;
            text-align: center;
        }

        @media print
        {                
            tHead
            {    
                display : table-header-group;    
                border:solid 1px #000000;
            }
            
            .Logo 
            {
             font-family:Verdana;
             font-size:16px;
             font-weight:bold;
             color:#000000;
            }
            
         }               
    </style>
When a user clicks on my print image, this javascript gets called:

HTML Code:
    <script type="text/javascript">
        // Repeate the table header on each page ...
        function AddTHEAD(tableName) {
            var table = document.getElementById(tableName);
            if (table != null) {
                var head = document.createElement("THEAD");
                head.style.display = "table-header-group";
                head.appendChild(table.rows[0]);
                table.insertBefore(head, table.childNodes[0]);
            }
        }   
                                 
    </script>
Also, I'm calling this C# codebehind method OnRowDataBound:

Code:
        protected void ChangeVarianceColor(object sender, GridViewRowEventArgs e)
        {
            if ( e.Row.RowType == DataControlRowType.DataRow)
            {
                //Insert a Page Break after every 20th row
                if (e.Row.RowIndex % 20 == 0)
                {
                    e.Row.Attributes.Add("style", @"page-break-after:always;");
                }
            }
        }
So all this together will create a page break every 20 records and print out the header row before printing the next 20 records. In Internet Explorer, it works exactly as it should; but when I run it in Chrome, the Print Preview pops up, and it ignores the page break and reprinting of headers and just runs off one page and onto the next. I haven't even attempted it in Safari yet .

So my question is, am I not fully grasping the power of HTML 5, or unfortunately are the browsers still so far apart in the way they perform, that there is no "one-fit" solution?