พอดีว่ามันต้องทำรายงานแบบ html ที่เป็นตารางมีข้อมูลเยอะๆ อยากให้เวลาสั่งพิมพ์หรือปริ๊นท์(print) ข้อมูลมันเกินหน้ากระดาษ header กับ footer ของตารางต้องแสดงด้วยทุกหน้า

(แอบบ่น เขาบอกว่ามีตัวอย่างอยู่แล้ว ไปดูกะจะลอก แต่ใช้ไม่เห็นได้สงสัยจะเขียนไม่ครบ ไม่ง้อหรอก)

in .css

*** ถ้าจะให้มันแสดงเมื่อ print ด้วย อย่าลืม media=”print” นะจ๊ะ

<style type="text/css" media="print,screen" >
th {
  font-family:Tahoma;
  color:black;
  background-color:#DDDDDD;
}
thead {display:table-header-group;}
tbody {display:table-row-group;}
tfoot {display: table-footer-group;}
</style>

in .html

<table border="1" cellpadding="2" cellspacing="0">
  <thead>
    <tr>
      <th>ID</th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>xxxxx</td>
      <td>yyyyy</td>
    </tr>
  </tbody>
</table>

มีตัวช่วยให้ง่ายๆ http://gradients.glrzad.com/

    background-image: linear-gradient(bottom, #D8DF01 12%, #F3F781 56%);
    background-image: -o-linear-gradient(bottom, #D8DF01 12%, #F3F781 56%);
    background-image: -moz-linear-gradient(bottom, #D8DF01 12%, #F3F781 56%);
    background-image: -webkit-linear-gradient(bottom, #D8DF01 12%, #F3F781 56%);
    background-image: -ms-linear-gradient(bottom, #D8DF01 12%, #F3F781 56%);
    
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.12, #D8DF01),
        color-stop(0.56, #F3F781)
    );

    /* For Internet Explorer 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#F3F781, endColorstr=#D8DF01);
    /* For Internet Explorer 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#F3F781, endColorstr=#D8DF01)";    
    background-color: #D8DF01;

ไม่มีอะไรมาก ใช้มุก replace

            <script>
                jQuery(function($) {
                    $('#article_body_editor').on('keyup keypress blur change', function() {
                        article_body_editor = $('#article_body_editor').html()
                            .replace(/\[prettyprint\]/g, '<pre class="prettyprint">')
                            .replace(/\[prettyprint linenums\]/g, '<pre class="prettyprint linenums">')
                            .replace(/\[\/prettyprint\]/g, '</pre>')
                            .replace(/\[code\]/g, '<code>')
                            .replace(/\[\/code\]/g, '</code>');
                        $('#article_body').val(article_body_editor);
                    });
                });
            </script>