CSS problem with spacing

I have a table, in the Table header (TH) I have a background with CSS:

.gridView th
{
padding-top: 1px;
background-image: url('/Images/Design/New/mitte-tb_02.gif');
background-repeat: repeat-x;
background-position: 0px 0px;
color: #FFFFFF;
border: 1px solid Gray;
text-align: cent开发者_如何转开发er;
}

Now I will right an left from the border 1px space between border and background. I try all, but it seems useless.

any ideas?

You can achieve this by setting border-collapse on the table to separate and the background colour of the table to Gray. Then set the border of the cells to the colour that you want between the gray border and the background image. See this example: http://jsfiddle.net/NMx5M/

You can put inner div in th element and set background for it with with margin: 0 1px;. An example (I replaced image with color for simplicity).

If I understand you correctly:

By the nature of "background", the image will fill as much of the space as the image size permits (especially if it repeats).

You could force a border using cellspacing or a white border for a visual impression.

Alternatively you will want to make the background image exactly 1px too small around the edges, and position the background absolutely to give the ~impression~ of the gap.

edit

you can perhaps do something like this

    .foo {
        background: url(bg.jpg) repeat-x; 
        display:block; 
        width:99%; 
        height:99%;
    }

<th style="padding:1px;" scope="col"><span class="foo">Foo Bar</span></th>

b