Không có khoảng cách đường viền trước mục đầu tiên và sau mặt hàng cuối cùng

Question

Tôi có một bảng giả. Tôi sử dụng thuộc tính khoảng cách đường viền để tạo khoảng trắng giữa chúng. Nhưng điều này cũng tạo khoảng cách trước ô đầu tiên và sau ô cuối cùng.

Tôi muốn tạo không gian chỉ giữa hai cột đó.

HTML:

<div class="table"> 
    <div class="cell"></div> 
    <div class="cell"></div> 
</div> 

CSS:

.table { 
    display: table; 
    width: 100%; 
    border-spacing: 11px 0; 
    border: 1px solid #222; 
} 

.cell { 
    display: table-cell; 
    width: 50%; 
    height: 20px; 
    border: 1px solid #999; 
    background: #ccc; 
} 

JSFiddle: http://jsfiddle.net/ACH2Q/

Answer 1

Nếu bạn nhìn vào spec cho các bảng trong CSS, bạn sẽ tìm thấy ở đó rằng border-spacing áp dụng thống nhất, thêm ví dụ lề của các thành phần table-cell bị bỏ qua.

Vì vậy, dường như không có giải pháp sạch nào cho vấn đề của bạn bằng cách sử dụng div s với display: table ngoại trừ hacks khá bẩn (Tôi đã tìm thấy điều này one sử dụng "spacer divs").

Nhưng nếu bạn sử dụng bảng "thật" thì bạn có thể sử dụng một giải pháp mà tôi thấy khá chấp nhận được. Xem bản cập nhật này jsFiddle bản gốc của bạn.

Các đánh dấu (Tôi đã thêm một cột):

<table> 
    <tr> 
     <td></td> 
     <td></td> 
     <td class="last"></td> 
    </tr>   
</table> 

Ý tưởng là để làm cho nội td s diplay:inline-block mà làm cho họ đáp ứng với lợi nhuận một lần nữa. Sau đó, bạn áp dụng quy tắc chọn CSS td + td sẽ chọn tất cả td s nhưng quy tắc đầu tiên. Áp dụng margin-left cho những yếu tố đó để có được "khoảng cách bên trong" của bạn. Cuối cùng, bạn phải float:right cột cuối cùng để làm cho nó thêm với đường viền bảng bên phải.

table { 
    width: 100%; 
    border: 5px solid #222; 
    border-collapse: separate; 
} 

td + td { 
    margin-left: 8%; 
} 

td.last { 
    float: right; 
} 

td { 
    display: inline-block; 
    width: 27%; 
    height: 20px; 
    border: 1px solid #999; 
    background: #ccc; 
} 

Answer 2

Bạn có thể sử dụng thuộc tính giãn cách đường viền để thêm khoảng cách vào tất cả các ô của bảng. Sau đó, sử dụng lề trái và lề phải để loại bỏ khoảng cách biên giới bên ngoài khỏi bố mẹ.

.container { 
    max-width: 980px; 
    margin: 0 auto; 
    overflow: hidden; 
} 

.grid { 
    margin-left: -20px; /* remove outer border spacing */ 
    margin-right: -20px; /* remove outer border spacing */ 
} 

.row { 
    display: table; 
    table-layout: fixed; /* keep equal cell widths */ 
    width: 100%; /* need width otherwise cells aren't equal and they self collapse */ 
    border-spacing: 20px 0; /* best way to space cells but has outer padding */ 
} 

.col { 
    display: table-cell; 
    vertical-align: top; 
} 

Điều bất lợi duy nhất là bạn cần thêm div lồng nhau vì bảng cần chiều rộng 100% và lề phải không hoạt động.

<div class="container"> 
    <div class="grid"> 
     <div class="row"> 
      <div class="col">col</div> 
      <div class="col">col</div> 
      <div class="col">col</div> 
     </div> 
    </div> 
</div>