Question

I was styling up a server generated table with some CSS (I’m trying to prove that Telerick controls are overrated, but that’s a different discussion).

Any way, the tables look great in IE8 and Firefox and are styled exactly as I would expect. However, the table looks awful in Chrome. Don’t get me wrong, Chrome is a great browser, and what I usually use; however, it may be lacking in the particular aspect.

So basically what I am asking is: Does Chrome have problems with CSS and tables or am I just poor at CSS (while IE and Firefox correctly anticipated my weakness)?

UPDATE: the problem is that the table (set to width: 100%) is overrunning its parent container which has the border to pretty the whole thing up. Additionally, the pager row at the bottom has it’s border top property set to “dotted”, yet it is solid on one of the columns!?

/*-------------Grid------------*/
table.grid
{
    width: 100%;
}

.grid tr th
{
    background-color: #696969;
    background-image: url('/Images/grid-bg.png');
    color: White;
    height: 20px;
    padding: 3px;
    text-align: left;
}

.grid td, .grid th
{
    border-right: 1px solid white;
}

.grid th a:hover, .grid th a:link
{
    color: White;
    text-decoration: none;
    display:inline-block;
    width: 100%;
    height: 100%;
}

.grid th a:hover
{
    background-color: #696969;
}

.grid tr.even
{
    background-color: #EBF2FC;
}

div.grid
{
    border: 1px solid #5D7FA6;
    padding: 1px 0px 1px 1px;
}

.pager
{
    border-top:  1px dotted #5D7FA6;
}

.data-row
{
    height: 24px;
}

.grid tr.data-row:hover
{
    color:White;
    background-color: #5D7FA6;
}

Answer 1

It’s still difficult to tell you exactly what to change without seeing a test case.

However.. try box-sizing: border-box. See: https://developer.mozilla.org/en/CSS/box-sizing

Add this to something (table.grid? div.grid?):

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;