Bố cục bảng CSS: tại sao hàng bảng không chấp nhận ký quỹ?

Question

.container { 
 
    width: 850px; 
 
    padding: 0; 
 
    display: table; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
.row { 
 
    display: table-row; 
 
    margin-bottom: 30px; 
 
    /* HERE */ 
 
} 
 
.home_1 { 
 
    width: 64px; 
 
    height: 64px; 
 
    padding-right: 20px; 
 
    margin-right: 10px; 
 
    display: table-cell; 
 
} 
 
.home_2 { 
 
    width: 350px; 
 
    height: 64px; 
 
    padding: 0px; 
 
    vertical-align: middle; 
 
    font-size: 150%; 
 
    display: table-cell; 
 
} 
 
.home_3 { 
 
    width: 64px; 
 
    height: 64px; 
 
    padding-right: 20px; 
 
    margin-right: 10px; 
 
    display: table-cell; 
 
} 
 
.home_4 { 
 
    width: 350px; 
 
    height: 64px; 
 
    padding: 0px; 
 
    vertical-align: middle; 
 
    font-size: 150%; 
 
    display: table-cell; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="home_1"></div> 
 
    <div class="home_2"></div> 
 
    <div class="home_3"></div> 
 
    <div class="home_4"></div> 
 
    </div> 
 

 
    <div class="row"> 
 
    <div class="home_1"></div> 
 
    <div class="home_2"></div> 
 
    </div> 
 
</div>

Câu hỏi của tôi là liên quan đến đường dây đánh dấu HERE trong CSS. Tôi phát hiện ra rằng các hàng quá gần nhau, vì vậy tôi đã cố gắng thêm một lề dưới để tách chúng. Thật không may nó không hoạt động. Tôi phải thêm các lề vào các ô của bảng để phân tách các hàng.

Lý do đằng sau hành vi này là gì?

Ngoài ra, là nó ok để sử dụng chiến lược này để thực hiện layouting như tôi đang làm:

[icon] - text  [icon] - text 
[icon] - text  [icon] - text 

hoặc là có một chiến lược tốt hơn?

Answer 1

Xem tiêu chuẩn CSS 2.1, phần 17.5.3. Khi bạn sử dụng display:table-row, chiều cao của DIV chỉ được xác định theo chiều cao của các phần tử table-cell trong đó. Vì vậy, lề, đệm và chiều cao trên các yếu tố đó không có hiệu lực.

http://www.w3.org/TR/CSS2/tables.html

Answer 2

Bạn đã thử đặt lề dưới thành .row div, tức là "ô" của bạn? Khi bạn làm việc với các bảng HTML thực tế, bạn cũng không thể đặt lề thành các hàng - chỉ với các ô.

Answer 3

Điều gần nhất tôi đã nhìn thấy sẽ được thiết lập border-spacing: 0 30px; để div container. Tuy nhiên, điều này chỉ để lại cho tôi với không gian trên cạnh trên của bảng, mà đánh bại mục đích, vì bạn muốn margin-bottom.

Answer 4

Làm thế nào điều này cho một công việc xung quanh (sử dụng một bảng thực tế)?

table { 
    border-collapse: collapse; 
} 
tr.row { 
    border-bottom: solid white 30px; /*change "white" to your background color*/ 
} 

Nó không phải là động vì bạn phải đặt màu sắc của đường viền (trừ khi có cách nào đó), nhưng đây là điều tôi đang thử nghiệm với dự án của riêng mình.

Sửa bao gồm yêu cầu liên quan "minh bạch":

tr.row { 
    border-bottom: 30px solid transparent; 
} 

Answer 5

Fiddle

.row-seperator{ 
    border-top: solid transparent 50px; 
} 

<table> 
    <tr><td>Section 1</td></tr> 
    <tr><td>row1 1</td></tr> 
    <tr><td>row1 2</td></tr> 
    <tr> 
     <td class="row-seperator">Section 2</td> 
    </tr> 
    <tr><td>row2 1</td></tr> 
    <tr><td>row2 2</td></tr> 
</table> 


#Outline 
Section 1 
row1 1 
row1 2 


Section 2 
row2 1 
row2 2 

này có thể là một giải pháp

Answer 6

Có một sửa chữa khá đơn giản cho điều này, các border-spacing và border-collapse Thuộc tính CSS hoạt động trên display: table;

Bạn có thể sử dụng thông tin sau để có được đệm/lề trong ô của mình.

.container { 
 
    width: 850px; 
 
    padding:0; 
 
    display: table; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    border-collapse: separate; 
 
    border-spacing: 15px; 
 
} 
 

 
.row { 
 
    display: table-row; 
 
} 
 

 
.home_1 { 
 
    width:64px; 
 
    height: 64px; 
 
    padding-right: 20px; 
 
    margin-right: 10px; 
 
    display: table-cell; 
 
} 
 

 
.home_2 { 
 
    width:350px; 
 
    height: 64px; 
 
    padding: 0px; 
 
    vertical-align:middle; 
 
    font-size: 150%; 
 
    display: table-cell; 
 
} 
 

 
.home_3 { 
 
    width:64px; 
 
    height: 64px; 
 
    padding-right: 20px; 
 
    margin-right: 10px; 
 
    display: table-cell; 
 
} 
 

 
.home_4 { 
 
    width: 350px; 
 
    height: 64px; 
 
    padding: 0px; 
 
    vertical-align: middle; 
 
    font-size: 150%; 
 
    display: table-cell; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
     <div class="home_1">Foo</div> 
 
     <div class="home_2">Foo</div> 
 
     <div class="home_3">Foo</div> 
 
     <div class="home_4">Foo</div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <div class="home_1">Foo</div> 
 
     <div class="home_2">Foo</div> 
 
    </div>

Lưu ý rằng bạn có có

border-collapse: separate; 

Nếu không nó sẽ không hoạt động.

Answer 7

thêm thẻ br giữa các div hoạt động. thêm thẻ br giữa hai div được hiển thị: table-row trong một parent với display: table