Hello,

I am applying a background to my table header.
I want the background to be applied to each table cell but having a
padding of 1px.
So, in each header cell the background will have a white line around
it not touching the border.

How can I do this?

I have the following but it is not working:

..Grid thead th
{
background: url(Images/GridHeaderBackground.jpg) repeat-x;
padding: 4px;
text-align: left;
}

Thank You,
Miguel

shapper schrieb:
> I am applying a background to my table header.
> I want the background to be applied to each table cell but having a
> padding of 1px.
> So, in each header cell the background will have a white line around
> it not touching the border.

table {
border-collapse: collapse;
}
?

--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

On 2008-03-01, shapper <mdmoura@gmail.com> wrote:
> Hello,
>
> I am applying a background to my table header.
> I want the background to be applied to each table cell but having a
> padding of 1px.
> So, in each header cell the background will have a white line around
> it not touching the border.
>
> How can I do this?

You can't. The background image goes right up to the border, that's just
the way it's defined.

You could edit the image to put a 1px white line at the bottom. Then
inside the <th> nest a div with 1px top left and right white borders.

This will work since your image is only repeat-x and not -y. But it
illustrates another problem which is that you don't know the height the
th is going to be (it depends on the user's font). But perhaps you don't
mind a bigger gap or no gap below the image.

> I have the following but it is not working:
>
> .Grid thead th { background: url(Images/GridHeaderBackground.jpg)
> repeat-x; padding: 4px; text-align: left; }
>
> Thank You, Miguel