代码之家 › 专栏 › 技术社区 › PassionateDeveloper

带间距的CSS问题

css

PassionateDeveloper · 技术社区 · 15 年前

我有一个表,在表头(th)中我有一个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;
}

现在,我将在边框和背景之间的1px空格处左对齐。我尽力了,但似乎没用。

有什么想法吗?

3 回复 | 直到 15 年前

Simon Dyson 15 年前

您可以通过将表格上的边框折叠设置为单独,并将表格的背景色设置为灰色来实现这一点。然后将单元格的边框设置为灰色边框和背景图像之间所需的颜色。请参见此示例: http://jsfiddle.net/NMx5M/

Nikita Rybak 15 年前

你可以把内部分区 th 元素并用设置其背景 margin: 0 1px; . An example (为了简单起见,我用颜色替换了图像)。

Ross 15 年前

如果我理解正确:

根据“背景”的性质,图像将在图像大小允许的情况下填充尽可能多的空间(尤其是如果重复)。

可以使用单元格间距或白色边框强制边框以获得视觉效果。

或者,您希望使背景图像在边缘周围精确缩小1px,并绝对定位背景,以获得间隙的~impression~。

编辑

你也许可以这样做

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

乙

推荐文章