Brak odstępu między obramowaniem przed pierwszym elementem i po ostatniej pozycji

Question

Mam fałszywy stół. Używam właściwości border-spacing, aby utworzyć odstęp między nimi. Ale to również tworzy odstępy przed pierwszą komórką i po ostatniej komórce.

Chciałbym utworzyć spację między tymi dwoma kolumnami.

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

Jeśli spojrzeć na spec dla tabel w CSS, znajdziesz tam, że border-spacing stosuje się w sposób jednolity, dodając np margines na twoje elementy table-cell jest ignorowany.

Wydaje się, że nie ma czystego rozwiązania problemu przy użyciu div s z display: table z wyjątkiem dość brudnych hacków (znalazłem to one za pomocą "div spacerów").

Jeśli jednak można użyć "prawdziwego" stołu, można użyć rozwiązania, które uważam za całkiem akceptowalne. Zobacz tę aktualizację oryginału jsFiddle.

Znacznik (I) dodano do kolumny:

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

Chodzi o to, aby wewnętrzny td s diplay:inline-block co sprawia, że ​​w odpowiedzi na marginesie ponownie. Następnie stosujesz regułę selektora CSS td + td, która wybiera wszystkie td s, ale pierwszą. Zastosuj do tych elementów margin-left, aby uzyskać "wewnętrzny odstęp". Na koniec musisz ostatnią kolumnę, aby dodać ją do prawej krawędzi tabeli.

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

Możesz użyć właściwości border-spacing, aby dodać odstępy do wszystkich komórek tabeli. Następnie użyj lewego marginesu i marginesu prawego, aby usunąć zewnętrzne odstępy od rodzica.

.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; 
} 

Jedyną wadą jest to, że potrzebujesz dodatkowego zagnieżdżonego elementu div, ponieważ tabela wymaga szerokości 100%, a margines w prawo nie działa.

<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>