1

please check attached screenshot My output is displaying like this

I want to print only that box with design as it is displaying, when I clicked on print button. Bellow is my HTML and code

<table width="100%">
  <tr>
    <td align="center"><table width="590" class="label">
        <tr>
          <td><table width="550" border="1" id="print_div<?php echo  $pr; ?>">
              <tr>
                <td width="150" class="shipp_td" height="222">

                <div class="shipping_address" id="shipping_address"> <b> <?php echo $row['shipfirstname']; ?> &nbsp; <?php echo $row['shiplastname']; ?><br />
                    <?php echo $row['shipaddress1']; ?><br />
                    <?php echo $row['shipcity']; ?>,<?php echo $row['shipstate']; ?>,<br />
                    <?php echo $row['shippostalcode']; ?><br />
                    <?php echo $row['shipcountry']; ?><br />
                    <?php echo $row['shipphonenumber']; ?><br />
                    <?php echo $row['emailaddress']; ?> </b> </div></td>
                <td class="product_info"><!--<div class="order_id"><?php //echo $row['orderid']; ?></div>-->

                  <div class="product_name" id="product_name"><?php echo $row['productname']; ?></div>
                  <div class="option_name" id="option_name">
                    <?php
            $nicotine = $array1['Nicotine Level'];
             $nic = str_replace('Nicotine', 'Nic', $nicotine);
             echo $nic;
            //echo $row['options']; ?>
                  </div></td>
              </tr>
            </table></td>
          <td class="print_td"><a href="javascript:void(0)"  onclick="printContent('print_div<?php echo  $pr; ?>')">Print</a></td>
        </tr>
      </table></td>
  </tr>
</table>
Rash
  • 876
  • 4
  • 18
  • 39

2 Answers2

2

When Print link is pressed you can hide all tables and then show only the one from which the print event was fired from.

Here is an example using jQuery and CSS: JSFiddle

CSS:

@media print
{
    .print-hidden {
        display: none;
    }

    a {
        display: none;
    }
}

JavaScript:

$(function() {
    $("table a").click(function (){
        $("body > table").addClass("print-hidden");
        $(this).parents("table").last().removeClass("print-hidden");
        if (window.print) {
            window.print();
        }
    });
});
Martin Tale
  • 877
  • 1
  • 6
  • 18
1

you can reference css on difference mode(screen/print)，then display:none on print's css 

<link type="text/css" media="screen" rel="stylesheet" href="normal.css"/>
<link type="text/css" media="print" rel="stylesheet" href="print.css"/>
sheauren
  • 96
  • 2
  • 6
  • can you please explain lil bit more, I have made both css,but my normal css is working only. – Rash Aug 13 '13 at 06:29
  • media='print' is only used when print, you can reference: http://www.w3schools.com/tags/att_link_media.asp – sheauren Aug 13 '13 at 06:45