Margen de celda CSS

95

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.

html css cell margin css-tables Tom
fuente
Hay una buena solución CSS aquí, recientemente actualizada: stackoverflow.com/a/21551008/2827823
Ason

Respuestas:

89

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>
roman m
fuente
12
Un enfoque mucho mejor sería utilizar el colapso de la frontera: por separado
Gaurav Ramanan
21
En caso de que alguien estuviera copiando / pegando la técnica de colapso del borde el comentario anterior, debería ser border-collapse: separate(hubo un error tipográfico en la ortografía separateanterior)
Tony DiNitto
1
Además, si desea definir la cantidad de espacio entre los bordes, tendrá que usarborder-spacing: 5px;
Sølve Tornøe
border-spacingtambién agrega espacio entre filas. Desafortunadamente, no existe una propiedad separada para el espaciado vertical y horizontal.
Lee Blake
border-spacingtoma dos argumentos: uno para horizontal y otro para vertical.
OldTinfoil
152

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!

ravi
fuente
Esto es genial y todo para el relleno, pero ¿qué pasa con el margen? Quiero agregar espacio fuera de la celda que contiene un borde. El margen CSS parece no tener ningún efecto en las celdas.
Levitikon
1
Levitikon, es cierto, los márgenes no funcionan por las razones anteriores. La única forma de obtener lo que desea, AFAIK, es envolver el contenido de la celda en un DIV, agregar el margen y el borde a ese DIV, en lugar de la celda.
ravi
Publiqué una solución CSS hace mucho tiempo (la actualicé hoy): stackoverflow.com/a/21551008/2827823
Ason
14

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.


fuente
14

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

Cian
fuente
Parece que el borde tiene el mismo problema que el relleno: agrega espacio entre el contenido de la celda y el límite, no fuera del límite.
stewbasic
11

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.

MrTrebor
fuente
esto es bueno, simple y efectivo, gracias por recordarme +1
Hayden Thring
8
Este no es un buen enfoque para la separación de estructura y estilo. No se trata de si se requiere CSS o no; CSS debería usarse para algo como esto.
Simon Robb
no debería ser <td style = "width: 10px;"> </td>
Rune Jeppesen
1
Recuerde, las soluciones más simples son las mejores. El método con estilo en línea también es bueno :)
MrTrebor
Funciona para mi caso específico. Muy creativo. Gracias
Phan Van Linh
7

Prueba padding-right. No está permitido poner margin's entre celdas.

<table>
   <tr>
      <td style="padding-right: 10px;">one</td>
      <td>two</td>
   </tr>
</table>
mpen
fuente
4

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>
Robin
fuente
4

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

Un hijo
fuente
Esto también funcionó para tablas css (display: table *) hechas de divs.
Necreaux
2

No puede seleccionar columnas individuales en una celda de esa manera. En mi opinión, su mejor opción es agregar a style='padding-left:10px'en la segunda columna y aplicar los estilos en un elemento o div interno. De esta forma puedes lograr la ilusión de un espacio mayor.

jerebear
fuente
2

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.

Dallas Clark
fuente
2

SOLUCIÓN

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:

http://jsfiddle.net/MG4hD/


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; }
Oneezy
fuente
1

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.

Vitaly Chernobyl
fuente
1 

<!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>
Expandir fragmento

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.

Sengottaian Karthik
fuente
Esta solución ya está publicada, no es necesario que 2 respuestas digan lo mismo.
Ason
1

Puedes usar ambos:

padding-right:10px;

padding-right:10%;

Pero es mejor usarlo con % .

Muhammad Awais
fuente
1
He votado a favor, pero es posible que haya explicado por qué es mejor usarlo%
Mawg dice que restablezca a Monica el
1
Normalmente,% se utiliza para responder.
Muhammad Awais
1
Más uno: ¿quizás podrías editar tu respuesta para decirlo? Es posible que no todos los que lean lean los comentarios ... Si desea agregar un enlace a algo sobre diseño receptivo, aún mejor :-)
Mawg dice restablecer a Monica
1

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; }
Esdras
fuente
Eso es enmascarar el problema, no responderlo. Nadie aprenderá a hacerlo correctamente al hacer eso
Mawg dice reinstalar a Monica