Làm cách nào để nhận được thuộc tính đường viền và đường biên làm việc cùng nhau?

Question

Tôi có CSS ​​này:

#center{ 
    display:table-row; 
    border:solid #55A 1px; 
    background-color:#AAF; 
    height:100%; 
} 

Trên thực tế, bất động sản biên giới chỉ là bỏ qua. Tại sao? Làm thế nào tôi có thể sửa chữa nó?
DEMO
Cảm ơn

Answer 1

Nếu bạn thêm một 'di động' vào bảng hàng, ví dụ:

<div id="content"> 
    <div id="top">TOP</div> 
    <div id="center"> 
     <div>CENTER</div> 
    </div> 
</div>​ 

Sau đó, CSS sau đây hoạt động:

#center{ 
    display:table-row; 
} 
#center > div { 
    display: table-cell; 
    border:solid #55A 1px; 
    background-color:#AAF; 
    height:100%; 
} 

JS Fiddle demo.

Điều quan trọng cần nhớ là trình duyệt sẽ hiển thị phần tử khi bạn nói; vì vậy, nếu bạn thông báo cho một số div đến display: table-row, nó sẽ hiển thị theo cách đó; và table-row không có border. Tuy nhiên, table-cell s, đó là lý do tại sao tôi đã thêm con div và gán nó là thuộc tính display.

Answer 2

Bảng hàng không thể có biên giới. Các ô trong một hàng của bảng có thể, nhưng chính hàng đó không thể.

Answer 3

CSS

#content{ 
    display:table; 
    border:solid black 1px;  
    width:250px; 
    height:300px; 
} 
.center{ 
    display:table-row; 
} 
.center > div { 
    display: table-cell; 
    border:solid #55A 1px; 
    background-color:#AAF; 

} 
#top{  
    border:solid red 1px; 
} 

HTML

<div id="content"> 
    <div class="center" style="height:50px"> 
     <div id="top">TOP</div> 
    </div> 
    <div class="center" style="height:100%"> 
     <div>CENTER</div> 
    </div> 
    <div class="center" style="height:50px"> 
     <div>BOTTOM</div> 
    </div> 
</div> 

demo