Pregunta Establecer cellpadding y cellspacing en CSS?


En una tabla HTML, el cellpadding y cellspacing se puede configurar de esta manera:

<table cellspacing="1" cellpadding="1">

¿Cómo se puede lograr lo mismo con CSS?


2922
2017-12-04 08:45


origen


Respuestas:


Lo esencial

Para controlar "cellpadding" en CSS, simplemente puede usar padding en celdas de tabla. P.ej. para 10px de "cellpadding":

td { 
    padding: 10px;
}

Para "espacio de células", puede aplicar el border-spacing Propiedad CSS a tu mesa P.ej. para 10px de "separación de células":

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

Esta propiedad incluso permitirá espacios separados horizontales y verticales, algo que no podrías hacer con el "espacio de células" de la vieja escuela.

Problemas en IE <= 7

Esto funcionará en casi todos los navegadores populares, excepto Internet Explorer hasta Internet Explorer 7, donde casi no tiene suerte. Digo "casi" porque estos navegadores aún admiten el border-collapse propiedad, que combina los bordes de las celdas de la tabla contigua. Si estás tratando de eliminar el espacio de las células (es decir, cellspacing="0") entonces border-collapse:collapse debería tener el mismo efecto: no hay espacio entre las celdas de la tabla. Sin embargo, este soporte es defectuoso, ya que no anula un existente cellspacing Atributo HTML en el elemento de la tabla.

En resumen: para navegadores que no sean de Internet Explorer 5-7, border-spacing te maneja Para Internet Explorer, si su situación es correcta (desea 0 espacios de celda y su tabla ya no la tiene definida), puede usar border-collapse:collapse.

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

Nota: Para obtener una descripción general excelente de las propiedades de CSS que se pueden aplicar a las tablas y para qué navegadores, consulte este fantástica página de Quirksmode.


3226
2017-07-09 02:34



Defecto

El comportamiento predeterminado del navegador es equivalente a:

table {border-collapse: collapse;}
td    {padding: 0px;}

enter image description here

Cellpadding

Establece la cantidad de espacio entre el contenido de la celda y la pared de la celda

table {border-collapse: collapse;}
td    {padding: 6px;}

enter image description here

Células

Controla el espacio entre las celdas de la tabla

table {border-spacing: 2px;}
td    {padding: 0px;}

enter image description here

Ambos

table {border-spacing: 2px;}
td    {padding: 6px;}

enter image description here

Ambos (especial)

table {border-spacing: 8px 2px;}
td    {padding: 6px;}

enter image description here

Nota: Si hay border-spacing establecer, indica border-collapse propiedad de la mesa es separate.

¡Inténtalo tú mismo!

aquí puedes encontrar la antigua forma html de lograr esto.


849
2018-06-12 10:24



table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}

313
2017-08-24 15:17



Establecer márgenes en las celdas de la tabla realmente no tiene ningún efecto hasta donde yo sé. El verdadero CSS equivalente para cellspacing es border-spacing - pero no funciona en Internet Explorer.

Puedes usar border-collapse: collapse para establecer de manera confiable el espaciado de celda a 0 como se mencionó, pero para cualquier otro valor, creo que la única forma de navegación cruzada es seguir usando el cellspacing atributo.


104
2017-12-04 09:18



Este truco funciona para Internet Explorer 6 y posterior, Google Chrome, Firefox y Ópera:

table {
    border-collapse: separate;
    border-spacing: 10px; /* cellspacing */
    *border-collapse: expression('separate', cellSpacing = '10px');
}

table td, table th {
    padding: 10px; /* cellpadding */
}

los * la declaración es para Internet Explorer 6 y 7, y otros navegadores la ignorarán correctamente.

expression('separate', cellSpacing = '10px') devoluciones 'separate', pero se ejecutan ambas sentencias, ya que en JavaScript puede pasar más argumentos de lo esperado y todos serán evaluados.


84
2017-12-05 04:30



Para aquellos que quieren un valor de espacio de celda distinto de cero, el siguiente CSS funcionó para mí, pero solo puedo probarlo en Firefox. Ver el En modo capricho enlazar publicado en otro lugar para detalles de compatibilidad. Parece que no funciona con versiones anteriores de Internet Explorer.

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

61
2017-08-20 03:32



La solución simple a este problema es:

table
{
    border: 1px solid #000000;
    border-collapse: collapse;
    border-spacing: 0px;
}
table td
{
    padding: 8px 8px;
}

44
2017-12-08 16:04



Además, si quieres cellspacing="0", no te olvides de agregar border-collapse: collapse en tus tablehoja de estilo.


40
2017-12-04 09:06