I used the following CSS for a table but the table displays different in monitor 17" and 23".
How to fix it?
Can I change px to %?
I imagine you haven't constrained the width of the table. You appear to be shaping your page based on the monitor's size. That's not a good idea, as not everyone is using your sized monitor, nor are they all running the browser in a maximized window.
For example; I have a couple of 24" diag. monitors (1920px width). I set my browser windows to default to 1080px width, which is suitable for two or three columns. Any wider, and it is very likely a least one column will be too wide to read comfortably. The same with my laptop's 16" diag. screen (1366px width).
Have you tested with the browser window at various widths, right down to about 350px or smaller? With your use of padding, I imagine the tables get really screwed up or require a bunch of horizontal scrolling, which is generally undesirable.
Another thing to consider is the users' altering the font size. Have you tested that? One site I follow regularly recently "upgraded", reducing the design font size to 12px. In old fashioned newspaper lingo, that's agate or 9pt; the print used for baseball stats and gov't notices. Damned near unreadably small. I have to ++ the font size 133% to pica, 12pt, to be comfortable. I could stop at elite, 10pt, but that's considered somewhat fine print.
Please tell us what you're trying to accomplish and either post a minimal test case or give us a link to the page/s in question.
What I want to do is make
What I want to do is to make all pages at center of screen.
For example, the site below is always at the center of screen no matter in IE or Chrome, no matter in 17" or 23" monitor, I do not need to change the layout.
I just want to know how to complete it.