please check attached screenshot

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>

please check attached screenshot

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>

• php
• javascript
• jquery

• try stackoverflow./a/12997207/1755374 – Michael B. Commented Aug 13, 2013 at 6:00
• @MichaelB. yes this is working but I cant see the table structure in print preview.how do I do that – Rash Commented Aug 13, 2013 at 7:03

2 Answers 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();
        }
    });
});

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"/>