Print Page number on each page...

Question

I am Printing dynamically generate Html table using Print() function. To print header and footer on each page when print I used bellow mention style.
It's working properly, now I need to put page number in <tfoot> footer row like page 1 of 4.
Please help, how can I set page number?


<style type="text/css">
    @media print {
        thead { display: table-header-group; }
        tfoot { display: table-footer-group; }
    }
    @media screen {
        thead { display: block; }
        tfoot { display: block; }
    }
</style>
I tried this but it's not working:
@page :left {
    @bottom-left {
        content: counter(page);
    }
}

want to change header and footer value of
Internet Explorer >> File >> Page Setup >> Header/footer via css


I want to stop the header from being displayed when you print something and footer will show page number out in Internet Explorer you can simply go into the Page Setup and remove the "&w&bPage &p of &P" for the header and "&u&b&d" for the footer, which show the page numbers and URL.

However, I am developing a web application for a number of users and they will not want to have this URL and the page number displayed. Instead of going around to each PC and change the page setup settings in their internet explorer - is it possible to modify the header and footer values with JavaScript code in the web page that the user will want to print. And if so how is this achieved. If there is a previous discussion on this please point me to the thread.