CSS problem with spacing

Question

Hi,

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: center;
}

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

any ideas?

Answer 1

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

Answer 2

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).

Answer 3

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/