Introduction: In 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.
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.
In previous articles I have explained How to use Jquery to hide first / last or nth column of table before printing and Change background and border color of asp.net textbox and multiline textbox on focus using css and Convert text to uppercase or lowercase while typing in asp.net textbox using css and Jquery to show image preview after validating image size and type before upload in asp.net and Dropdownlist with checkboxes using jquery bootstrap multi select plugin
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 :
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.
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.
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:
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:
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.
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..