CSS to hide first / last or nth column of table before printing

IntroductionIn this article I am going to explain how to hide first/last or nth column i.e. any column we want to hide from table before printing or we can say in print preview mode so that they do not print on page.  


Description: Many times we have some additional columns in table e.g. checkbox in front or last column to select specific records or there may be edit or delete buttons in the table to perform edit and delete operations. 

Whenever we want to print the table data; checkboxes, edit, delete button should not be printed. Is it possible to hide these columns in print mode only without hiding it on page?
Yes, it is possible using javascript/jquery or simply using CSS. 

Here in this article I am using CSS to hide the unwanted columns in print mode so that they do not print on the page.

Using CSS @media Rule for media type 'print' and nth-child, first-child, last-child selectors  we can hide the columns to print.

Implementation: Let’s create an example for demonstration purpose.

<html>
<head>
    <title></title>
    <style>
        table {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 30%;
        }

        td, th {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }

        tr:nth-child(even) {
            background-color: #dddddd;
        }

        /*--------Hide nth column (2nd column here) ---------*/
        @media print {
            /*--------Hide second column header (th) ---------*/
            .employee th:nth-child(2) {
                display: none;
            }
            /*-----------------------------------*/
            /*--------Hide second column rows (td) ---------*/
            .employee td:nth-child(2) {
                display: none;
            }
            /*-----------------------------------*/        }
        /*-------------------------------*/
    </style>
</head>
<body>
    <table class="employee">
        <tr>
            <th>First Name</th>
            <th>Middle Name</th>
            <th>Last Name</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Jatin</td>
            <td>Kumar</td>
            <td>Verma</td>
            <td>23</td>
        </tr>
        <tr>
            <td>Sandeep</td>
            <td>Singh</td>
            <td>Dangi</td>
            <td>33</td>
        </tr>
        <tr>
            <td>Aman</td>
            <td>Pal</td>
            <td>Singh</td>
            <td>27</td>
        </tr>
    </table>
</body>
</html>

Below is the Table Data :

CSS to hide first / last or nth column of table before printing

Now as we know to print we can use the command CTRL+P to open print preview mode and print. Below is the table data in print preview mode. 

CSS to hide first / last or nth column of table before printing

As you can see in print preview mode 2nd column i.e. Middle Name column is hidden and it will not be printed on printing.

In above example we have hidden 2nd column which is Middle Name. We can hide any column using nth-child(n). Here n is the index of column you want to hide. For hiding second column we passed 2 in place of n.


Hide first column of table

To hide first column we need to use the following:

@media print {
            /*--------Hide first column header (th) ---------*/
            .employee th:first-child  {
                display: none;
            }
            /*-----------------------------------*/
            /*--------Hide first column rows (td) ---------*/
            .employee td:first-child  {
                display: none;
            }
            /*-----------------------------------*/
        }

Print Preview will be as:

CSS to hide first / last or nth column of table before printing


Hide last column of table

To hide last column we need to use the following:
@media print {
            /*--------Hide last column header (th) ---------*/
            .employee th:last-child  {
                display: none;
            }
            /*-----------------------------------*/
            /*--------Hide last column rows (td) ---------*/
            .employee td:last-child  {
                display: none;
            }
            /*-----------------------------------*/
        }

Print Preview will be as:

CSS to hide first / last or nth column of table before printing

Now over to you:
A blog is nothing without reader's feedback and comments. So please provide your valuable feedback so that i can make this blog better and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates.
Previous
Next Post »

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..