Pregunta Margen de celda CSS


En mi documento HTML, tengo una tabla con dos columnas y múltiples filas. ¿Cómo puedo aumentar el espacio entre la primera y la segunda columna con css? Intenté aplicar "margen-derecho: 10px"; a cada una de las celdas en el lado izquierdo, pero sin ningún efecto.


74
2018-04-04 03:28


origen


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>

73
2018-04-04 03:32



Sin embargo, una palabra de cautela padding-right podría resolver su problema particular (visual), no es la forma correcta de agregar espaciado Entre celdas de tabla. Qué padding-right para una celda es similar a lo que hace para la mayoría de los otros elementos: agrega espacio dentro la célula. Si las celdas no tienen un color de borde o de fondo u otra cosa que ofrezca el juego, esto puede imitar el efecto de establecer el espacio entre las celdas, pero no de otra manera.

Como alguien señaló, las especificaciones de margen se ignoran para las celdas de la tabla:

Especificación CSS 2.1 - Tablas - Diseño visual de los contenidos de la tabla

Los elementos de la tabla interna generan   cajas rectangulares con contenido y   fronteras. Las células también tienen relleno.   Los elementos internos de la mesa no tienen   márgenes.

¿Cuál es el camino "correcto" entonces? Si está buscando reemplazar el cellspacing atributo de la tabla, luego border-spacing (con border-collapse deshabilitado) es un reemplazo. Sin embargo, si se requieren "márgenes" por celda, no estoy seguro de cómo se puede lograr correctamente con CSS. El único truco que puedo pensar es usar padding como se indica arriba, evite cualquier estilo de las celdas (colores de fondo, bordes, etc.) y en su lugar use DIV contenedores 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 que sería genial saber! A mí también me gustaría una solución de CSS de margen de celda de tabla).

¡Aclamaciones!


138
2018-06-07 02:35



Si no puede usar relleno (por ejemplo, tiene bordes en td) intente esto

table { 
           border-collapse: separate;
           border-spacing: 2px;
}

19
2018-02-19 14:11



Me doy cuenta de que esto es bastante tardío, pero para el registro, también puede usar selectores 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.


14
2017-07-23 14:47



el margen no funciona desafortunadamente en celdas individuales, sin embargo, puede agregar columnas extra entre las dos celdas donde desea poner un espacio entre ... otra opción es usar un borde con el mismo color que el fondo ...


13
2018-04-07 13:33



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.


8
2018-04-05 21:21



Tratar padding-right. No puedes poner marginestá entre celdas.

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

7
2018-04-04 03:32