如何設置內部和外部元素的邊框以防止雙邊框在

Question

我知道我們可以使用inset和ouset邊框來爲表格設計邊框。當我們使用的表，因爲每一件事情是在td，你永遠不直接把一個元素或文本在table標籤

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

一切正常。

現在的問題是，當我們使用div s來做同樣的造型時，存在很多問題。

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/