Question

I have an oveflowing table and I cannot center the heading following the width of the overflowing table.

Here’s how it is viewed when print previewed:

http://www.mediafire.com/imgbnc.php/37044451cd71d383f8f39dccd88da170690fbc2f22cca0b7afaa3c33279cdcee6g.jpg

Notice that the headers are not centered. When previewed normally, the page looks like this:

http://www.mediafire.com/imgbnc.php/787d1776f8e89519630261d0063738ca48fc8404e18c46f380bbea785bfbf9b06g.jpg

I noticed that the center alignment just followed how it is seen on screen. How can I center the heading in this page?

By the way, here’s my css:

the text UNIVERSITY OF THE EAST etc.

.header {
    width: 100%;
    margin: 0 auto;
    height: auto;
} 

the grades table:

table.grades {
    border-collapse:collapse;
    border: #000 solid 1px;
    font:Arial, Helvetica, sans-serif;
    font-size: 14px;
    margin: 0 auto;
    overflow-x: visible;
    display: inline;
}

Answer 1

body{
    display: table; 
}
.table-grades{
    display: table-cell;
}