para - Espaciado entre los bordes de la tabla CSS solo dentro

tabla sin bordes css

Question

Intento resolver esto durante meses y Google no me ha ayudado. Estoy tratando de tener espacio entre las etiquetas <td> y <th> en una tabla, pero cuando lo hago, se espacia en el exterior. Por lo tanto, la tabla no está en línea con nada más. Entonces parece que la mesa tiene algo de relleno.

Parece que no puedo encontrar una solución.

Here hay un ejemplo del problema

Answer 1

Aquí está el truco genial para hacer eso

table {
border-collapse: inherit;
border-spacing: 10px;
width: calc(100% + 20px);
margin-left: -10px;
}

use margin-left: -10px; para eliminar el relleno izquierdo, pero a la derecha habrá un relleno de 20 píxeles. Ahora para actualizarlo use width: calc(100% + 20px);

Answer 2

Aquí hay una solución simple y limpia.

HTML

<div class="column-container">
<div class="column-children-wrapper">
<div class="column">One</div>
<div class="column">Two</div>
<div class="column">Three</div>
<div class="column">Four</div>
</div>
</div>

CSS

.column-container {
display: table;
overflow: hidden;
}
.column-children-wrapper {
border-spacing: 10px 0;
margin-left: -10px;
margin-right: -10px;
background-color: blue;
}
.column {
display: table-cell;
background-color: red;
}

https://jsfiddle.net/twttao/986t968c/

Answer 3

Encontré una manera de hacer esto con márgenes negativos y mejora la respuesta de Steven, ya que le permite hacer que la tabla ocupe el 100% incluso si no tiene suficiente contenido. La solución es hacer que el ancho de la tabla sea 100% y usar un margen negativo en un elemento que lo contenga:

#container {
margin: 0 -10px;
}
table {
border-collapse: separate;
border-spacing: 10px;
}
td, th {
background-color: #ccf;
padding: 5px;
}

Véalo como un jsFiddle

Answer 4

Optimicé la solución con un borde transparente para que no tenga más bordes interiores cortados oblicuamente.

1) deje que la tabla se llene horizontalmente y contraiga los bordes:

table {
width: 100%;
border-collapse: collapse;
}

2) Establezca todos los bordes de las celdas de la tabla al ancho 0 y evite que el fondo se dibuje debajo del borde.

td {
border: 0px solid transparent;
background-clip: padding-box;
}

3) Establezca el espacio interior con el borde transparente pero no en la primera fila y columna.

tr > td + td {
border-left-width: 10px;
}
tr + tr > td {
border-top-width: 10px;
}

aquí hay un jsbin

Answer 5

Si tuviese el mismo problema, la propiedad de separación de bordes también estaba agregando espacio alrededor de la mesa, y que yo sepa, no había manera de limitarlo a ''adentro'', así que usé bordes transparentes:

table td {
border-left: 1em solid transparent;
border-top: 1em solid transparent;
}

Esto establece el ''espaciado de bordes'' como normal, excepto que hay un espaciado ''no deseado'' en la parte superior e izquierda de la tabla.

table td:first-child {
border-left: 0;
}

Selecciona la primera columna.

table tr:first-child td {
border-top: 0;
}

Selecciona los elementos td de la primera fila (suponiendo que la parte superior de la tabla comience con un elemento tr, cámbielos por th) .

Answer 6

Similar a lo que dijo Steven Vachon, el margen negativo puede ser su mejor apuesta.

Alternativamente, puede usar calc() para solucionar el problema.

CSS:

/* border-collapse and border-spacing are css equivalents to <table cellspacing="5"> */
.boxmp {
width:100%;
border-collapse:separate;
border-spacing:5px 0;
}
/* border-spacing includes the left of the first cell and the right of the last cell
negative margin the left/right and add those negative margins to the width
ios6 requires -webkit-
android browser doesn''t support calc()
100.57% is the widest that I could get without a horizontal scrollbar at 1920px wide */
.boxdual {
margin:0 -5px;
width:100.57%;
width:-webkit-calc(100% + 10px);
width:calc(100% + 10px);
}

Simplemente agregue cualquier margen que saque o el ancho será demasiado estrecho (100% no es lo suficientemente ancho).

Answer 7

Use márgenes negativos y un contenedor con relleno positivo.

#container {
box-sizing: border-box; /* avoids exceeding 100% width */
margin: 0 auto;
max-width: 1024px;
padding: 0 10px; /* fits table overflow */
width: 100%;
}
table {
border-collapse: separate;
border-spacing: 10px;
margin: 0 -10px; /* ejects outer border-spacing */
min-width: 100%; /* in case content is too short */
}
td {
width: 25%; /* keeps it even */
}

Solo asegúrese de tener suficiente contenido para estirar la mesa al 100% de ancho, de lo contrario será 20 píxeles demasiado angosto.

Más información: svachon.com/blog/inside-only-css-table-border-spacing/