¿Cómo se especifica el relleno de tablas en CSS? (tabla, no relleno de celda)

Question

Tengo una tabla con un fondo de color y necesito especificar el relleno entre la tabla y su contenido, I.E. Células.
La etiqueta de tabla no parece aceptar un valor de relleno.
Firebug muestra la tabla y el diseño de tbody con relleno 0 pero no acepta ningún valor ingresado para ellos, así que supongo que simplemente no tienen la propiedad de relleno.
Pero la cosa es que quiero la misma separación entre las celdas que las celdas superiores con la parte superior de la mesa y las celdas inferiores con la parte inferior de la mesa.
De nuevo, lo que quiero no es relleno de celdas.

EDITAR: Gracias, lo que realmente necesitaba, me doy cuenta ahora, era el espacio entre los bordes, o su equivalente html, el espacio de las celdas.
Pero por alguna razón, no hacen nada en el sitio en el que estoy trabajando.
Ambos funcionan muy bien en un HTML separado, pero en el sitio no lo hacen.
Pensé que podría ser un estilo sobrescribir la propiedad, pero el espaciado de las celdas y el espaciado de los bordes en línea no deberían sobreescribirse, ¿verdad?
(uso firefox)

EDIT 2: No, el relleno TD no es lo que necesito. Con el relleno TD, los rellenos superior e inferior de las celdas adyacentes se suman, por lo que hay el doble de espacio (almohadilla en realidad) entre dos celdas que entre la celda superior y el borde superior de la mesa. Quiero tener exactamente la misma distancia entre ellos.

Answer 1

El método más fácil/mejor es utilizar el apoyo <table cellspacing="10">

La forma css: espaciado de borde (no soportado por el IE no creo)

<!-- works in firefox, opera, safari, chrome --> 
 
    <style type="text/css"> 
 
    
 
    table.foobar { 
 
    \t border: solid black 1px; 
 
    \t border-spacing: 10px; 
 
    } 
 
    table.foobar td { 
 
    \t border: solid black 1px; 
 
    } 
 
    
 
    
 
    </style> 
 
    
 
    <table class="foobar" cellpadding="0" cellspacing="0"> 
 
    <tr><td>foo</td><td>bar</td></tr> 
 
    </table>

Editar: si solo desea rellenar el contenido de la celda, y no espaciarlas, simplemente puede usar

<table cellpadding="10"> 

O

td { 
    padding: 10px; 
} 

Answer 2

Puede probar la propiedad de espacio entre bordes. Eso debería hacer lo que quieras. Pero es posible que desee ver esto answer.

Answer 3

No puede ... Tal vez si publicó una imagen del efecto deseado, hay otra manera de lograrlo.

Por ejemplo, puede envolver toda la tabla en un DIV y establecer el relleno en el div.

Answer 4

Puede establecer un margen para la tabla. Alternativamente, envuelva la tabla en un div y use el relleno de div.

Answer 5

Curioso, estaba haciendo precisamente esto ayer. Sólo se necesita esto en su archivo css

.ablock table td { 
    padding:5px; 
} 

luego envolver la mesa en un div adecuada

<div class="ablock "> 
<table> 
    <tr> 
    <td> 

Answer 6

CSS en realidad no le permite hacer esto a nivel de tabla. Generalmente, especifico cellspacing="3" cuando quiero lograr este efecto. Obviamente no es una solución CSS, así que tómalo por lo que vale.

Answer 7

Con css, una tabla puede tener relleno independientemente de sus celdas.

La propiedad de relleno no es heredada por sus hijos.

Por lo tanto, la definición:

table { 
    padding: 5px; 
} 

debería funcionar. También podría decirle específicamente al navegador cómo rellenar (o en este caso, no rellenar) sus celdas.

td { 
    padding: 0px; 
} 

EDIT: No soportado por IE8. Lo siento.

Answer 8

Aquí es lo que usted debe entender acerca de las tablas ... No son un árbol de elementos independientes anidados. Son un solo elemento compuesto. Mientras que los TD individuales se comportan más o menos como elementos de bloque CSS, el material intermedio (cualquier cosa entre TABLE y TD, incluidos TR y TBODY) es indivisible y no entra en en línea ni en el bloque. No se permiten elementos HTML aleatorios en ese espacio de otra dimensión, y el tamaño de dicho espacio de otra dimensión no se puede configurar en absoluto a través de CSS. Solo la propiedad HTML cellspacing puede acceder a ella, y esa propiedad no tiene un análogo en CSS.

Por lo tanto, para resolver su problema, me gustaría sugerir ya sea un envoltorio DIV como otro cartel indica, o si es absolutamente necesario mantenerla contenida en la tabla, usted tiene esta fea basura:

<style> 
    .padded tr.first td { padding-top:10px; } 
    .padded tr.last td { padding-bottom:10px; } 
    .padded td.first { padding-left:10px; } 
    .padded td.last { padding-right:10px; } 
</style> 

<table class='padded'> 
    <tr class='first'> 
     <td class='first'>a</td><td>b</td><td class='last'>c</td> 
    </tr> 
    <tr> 
     <td class='first'>d</td><td>e</td><td class='last'>f</td> 
    </tr> 
    <tr class='last'> 
     <td class='first'>g</td><td>h</td><td class='last'>i</td> 
    </tr> 
</table> 

Answer 9

table { 
    border: 1px solid transparent; 
} 

Answer 10

Hay otro truco:

/* Padding on the sides of the table */ 
table th:first-child, .list td:first-child { padding-left: 28px; } 
table th:last-child, .list td:last-child { padding-right: 28px; } 

(acabo de ver en mi trabajo actual)

Answer 11

table { 
    background: #fff; 
    box-shadow: 0 0 0 10px #fff; 
    margin: 10px; 
    width: calc(100% - 20px); 
}