如何设置内外元素的边框以防止双边框

Question

我知道我们可以将inset和ouset边框用于表格的样式边框。

table{border: 1px inset #fff;}
td{border: 1px outset #fff;}

当我们使用表时一切正常，因为每个事物都在td中，并且您从不直接在table标记中放置元素或文本。

现在的问题是，当我们使用div来执行相同的样式时，存在许多问题。

1. 如果我们在外部div中放置文本或元素，我们在其右侧看不到任何边框。
2. 第一个内部div没有在顶部边界。

这是使问题更具体的小提琴 http://jsfiddle.net/v4D9q/

Answer 1

你必须使用插入/开始吗？

这是几行css，但为什么不在外部的顶部/左/右边设置边框，只在内部元素上设置边框底部。

HTML：

<div class="outer">
    outer div (we dont see border in right side)
    <div class="inner">inner div</div>
    <div class="inner">inner div</div>
</div>

CSS：

.outer{
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-top: 1px solid #000;                
}
.inner{
    border-bottom: 1px solid #000; 
}

http://jsfiddle.net/PFhfF/