En mi documento HTML, tengo una tabla con dos columnas y varias filas. ¿Cómo puedo aumentar el espacio entre la primera y la segunda columna con css? Intenté aplicar "margin-right: 10px;" a cada una de las celdas del lado izquierdo, pero sin efecto.
Respuestas:
Aplica esto a tu primera <td>:
padding-right:10px;Ejemplo HTML:
<table>
<tr>
<td style="padding-right:10px">data</td>
<td>more data</td>
</tr>
</table>border-collapse: separate(hubo un error tipográfico en la ortografía separateanterior)
border-spacing: 5px;
border-spacingtambién agrega espacio entre filas. Desafortunadamente, no existe una propiedad separada para el espaciado vertical y horizontal.
border-spacingtoma dos argumentos: uno para horizontal y otro para vertical.
Una advertencia: aunque padding-rightpodría resolver su problema (visual) particular, no es la forma correcta de agregar espacio entre las celdas de la tabla. Lo que padding-righthace para una celda es similar a lo que hace para la mayoría de los otros elementos: agrega espacio dentro la celda. Si las celdas no tienen un borde o un color de fondo o algo más que delata el juego, esto puede imitar el efecto de establecer el espacio entre las celdas, pero no de otra manera.
Como señaló alguien, las especificaciones de margen se ignoran para las celdas de la tabla:
Especificación CSS 2.1 - Tablas - Diseño visual del contenido de la tabla
Los elementos internos de la tabla generan cajas rectangulares con contenido y bordes. Las celdas también tienen relleno. Los elementos internos de la tabla no tienen márgenes.
Entonces, ¿cuál es la forma "correcta"? Si está buscando reemplazar el cellspacingatributo de la tabla, entonces border-spacing(con border-collapsedeshabilitado) es un reemplazo. Sin embargo, si se requieren "márgenes" por celda, no estoy seguro de cómo se puede lograr correctamente usando CSS. El único truco que se me ocurre es usarlo paddingcomo se indicó anteriormente, evitar cualquier estilo de las celdas (colores de fondo, bordes, etc.) y, en su lugar, usar contenedores DIV dentro de las celdas para implementar dicho estilo.
No soy un experto en CSS, por lo que podría estar equivocado en lo anterior (¡lo cual sería genial saber! Yo también me gustaría una solución CSS de margen de celda de tabla).
¡Salud!
Si no puede usar relleno (por ejemplo, tiene bordes en td) intente esto
table {
border-collapse: separate;
border-spacing: 2px;
}Me doy cuenta de que esto es bastante tardío, pero para el registro, también puede usar selectores de CSS para hacer esto (eliminando la necesidad de estilos en línea). Este CSS aplica relleno a la primera columna de cada fila:
table > tr > td:first-child { padding-right:10px }¡Y este sería tu HTML, sin CSS !:
<table><tr><td>data</td><td>more data</td></tr></table>Esto permite un marcado mucho más elegante, especialmente en los casos en los que necesita hacer muchos formatos específicos con CSS.
El margen no funciona desafortunadamente en celdas individuales, sin embargo, puede agregar columnas adicionales entre las dos celdas entre las que desea poner un espacio ... otra opción es usar un borde con el mismo color que el fondo ...
Simplemente puede hacer eso:
<html>
<table>
<tr>
<td>one</td>
<td width="10px"></td>
<td>two</td>
</tr>
</table>
</html>No se requiere CSS :) Este 10px es tu espacio.
Usando border-collapse: separado; no funcionó para mí, porque solo necesito un margen entre las celdas de la tabla, no en los lados de la tabla.
Se me ocurrió la siguiente solución:
- CSS
.tableDiv{
display: table;
}
.cellSeperator {
display: table-cell;
width: 20px;
}
.cell1 {
display: table-cell;
width: 200px;
}
.cell2 {
display: table-cell;
width: 50px;
}- HTML
<div class="tableDiv">
<div class="cell1"></div>
<div class="cellSeperator"></div>
<div class="cell2"></div>
</div>Esta solución funciona para tdlos que necesitan tanto bordercomo paddingpara estilizar.
(Probado en Chrome 32, IE 11, Firefox 25)
CSS:
table {border-collapse: separate; border-spacing:0; } /* separate needed */
td { display: inline-block; width: 33% } /* Firefox need inline-block + width */
td { position: relative } /* needed to make td move */
td { left: 10px; } /* push all 10px */
td:first-child { left: 0px; } /* move back first 10px */
td:nth-child(3) { left: 20px; } /* push 3:rd another extra 10px */
/* to support older browsers we need a class on the td's we want to push
td.col1 { left: 0px; }
td.col2 { left: 10px; }
td.col3 { left: 20px; }
*/
HTML:
<table>
<tr>
<td class='col1'>Player</td>
<td class='col2'>Result</td>
<td class='col3'>Average</td>
</tr>
</table>Actualizado 2016
Firefox ahora lo admite sin inline-blocky un conjuntowidth
table {border-collapse: separate; border-spacing:0; }
td { position: relative; padding: 5px; }
td { left: 10px; }
td:first-child { left: 0px; }
td:nth-child(3) { left: 20px; }
td { border: 1px solid gray; }
/* CSS table */
.table {display: table; }
.tr { display: table-row; }
.td { display: table-cell; }
.table { border-collapse: separate; border-spacing:0; }
.td { position: relative; padding: 5px; }
.td { left: 10px; }
.td:first-child { left: 0px; }
.td:nth-child(3) { left: 20px; }
.td { border: 1px solid gray; }<table>
<tr>
<td>Player</td>
<td>Result</td>
<td>Average</td>
</tr>
</table>
<div class="table">
<div class="tr">
<div class="td">Player</div>
<div class="td">Result</div>
<div class="td">Average</div>
</div>
</div>Si tiene el control del ancho de la tabla, inserte un relleno a la izquierda en todas las celdas de la tabla e inserte un margen negativo a la izquierda en toda la tabla.
table {
margin-left: -20px;
width: 720px;
}
table td {
padding-left: 20px;
}Tenga en cuenta que el ancho de la tabla debe incluir el ancho del margen / relleno. Usando lo anterior como ejemplo, el ancho visual de la tabla será 700px.
Esta no es la mejor solución si está utilizando bordes en las celdas de su tabla.
Encontré que la mejor manera de resolver este problema era una combinación de prueba y error y leer lo que estaba escrito antes que yo:
Como puede ver, tengo algunas cosas bastante complicadas ... pero el factor principal para que esto se vea bien es:
ELEMENTO DE LOS PADRES (UL): colapso de borde: separado; espaciado de bordes: .25em; margen izquierdo: -.25em;
ELEMENTOS INFANTILES (LI): display: table-cell; alineación vertical: medio;
HTML
<ul>
<li><span class="large">3</span>yr</li>
<li>in<br>stall</li>
<li><span class="large">9</span>x<span class="large">5</span></li>
<li>on<br>site</li>
<li>globe</li>
<li>back<br>to hp</li>
</ul>CSS
ul { border: none !important; border-collapse: separate; border-spacing: .25em; margin: 0 0 0 -.25em; }
li { background: #767676 !important; display: table-cell; vertical-align: middle; position: relative; border-radius: 5px 0; text-align: center; color: white; padding: 0 !important; font-size: .65em; width: 4em; height: 3em; padding: .25em !important; line-height: .9; text-transform: uppercase; }Siguiendo la solución de Cian de establecer un borde en lugar de un margen, descubrí que puede establecer el color del borde en transparente para evitar tener que igualar el color del fondo. Funciona en FF17, IE9, Chrome v23. Parece una solución decente siempre que no necesite un borde real.
<!DOCTYPE html>
<html>
<head>
<style>
table{
border-spacing: 16px 4px;
}
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>Usar relleno no es la forma correcta de hacerlo, puede cambiar el aspecto pero no es lo que querías. Esto puede resolver su problema.
Puedes usar ambos:
padding-right:10px;
padding-right:10%;Pero es mejor usarlo con % .
%
Si el relleno no le funciona, otra solución es agregar columnas adicionales y establecer un margen mediante el ancho <colgroup>. Ninguna de las soluciones de relleno anteriores funcionó para mí ya que estaba tratando de darle un margen al borde de la celda, y esto es lo que resolvió el problema al final:
<table>
<colgroup>
<col>
<col width="20px">
<col>
</colgroup>
<tr>
<td>data</td>
<td></td>
<td>more data</td>
</tr>
</table>Diseñe los bordes de las celdas de la tabla usando: nth-child para que la segunda y tercera columnas parezcan ser una sola columna.
table tr td:nth-child(2) { border: 1px solid black; border-right:0; }
table tr td:nth-child(3) { border: 1px solid black; border-left:0; }