Sin espacio entre bordes antes del primer artículo y después del último artículo

Question

Tengo una tabla falsa. Yo uso la propiedad de espacio entre los bordes para crear un espacio entre ellos. Pero esto también crea espaciado antes de la primera celda y después de la última celda.

Me gustaría crear un espacio solo entre esas dos columnas.

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

Si nos fijamos en la spec para las tablas en CSS, se encuentra que hay que el border-spacing se aplica de manera uniforme, agregando por ejemplo se ignora un margen para sus elementos table-cell.

Así que no parece haber ninguna solución limpia para su problema usando div s con display: table a excepción de los cortes bastante sucia (que encontré este one usando divs "espaciador").

Pero si está bien que use una tabla "real" en su lugar, entonces puede usar una solución que considero bastante aceptable. Consulte esta actualización jsFiddle de su original.

El marcado (que añade una columna):

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

La idea es hacer interno td s diplay:inline-block lo que los hace sensibles a los márgenes de nuevo. A continuación, aplica una regla de selector de CSS td + td que selecciona todas las td pero la primera. Aplique un margin-left a esos elementos para obtener su "espacio interior". Finalmente, tiene que float:right la última columna para que se sume con el borde de la tabla derecha.

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

Puede usar la propiedad de espacio entre bordes para agregar espaciado a todas las celdas de la tabla. A continuación, use margin-left y margin right para eliminar el espaciado de borde externo del elemento primario.

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

La única desventaja es que se necesita el div anidado adicional porque la tabla necesita un ancho de 100% y el margen derecho no funcionará.

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