Tengo una tabla con un fondo de color y debo especificar el relleno entre la tabla y su contenido, I. E. células.

La etiqueta de la tabla no parece aceptar un valor de relleno.

Firebug se muestra la tabla y tbody del diseño con relleno de 0 pero no acepta cualquier valor introducido 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 de la parte superior de las células con la tabla de la parte superior y la parte inferior de las células con la tabla de la parte inferior.

De nuevo, lo que yo quiero no es la célula de relleno.

EDIT: Gracias, lo que realmente necesitaba, ahora me doy cuenta, era border-spacing, o su equivalente html, «cellspacing».

Pero por alguna razón, ellos no hacen nada en el sitio en el que estoy trabajando.

Ambos funcionan muy bien en un aparte de HTML, pero en el sitio no.

Pensé que podría ser algún estilo de sobrescribir la propiedad, pero «cellspacing» y de una línea de frontera-el espaciamiento no debe ser sobreescritos, ¿verdad?

(Yo uso firefox )

EDIT 2: No, TD relleno NO es lo que necesito. Con el TD de relleno, parte superior y parte inferior rellenos de celdas adyacentes en suma, por lo que hay el doble de espacio (pad en realidad) entre dos células que entre la parte superior de la célula y la mesa de la frontera. Quiero tener exactamente la misma distancia entre ellos.

InformationsquelleAutor Petruza | 2009-11-17

11 Comentarios

  1. 41

    La forma más fácil y mejor método es utilizar <table cellspacing="10">

    El css manera: border-spacing (no compatible con IE no creo)

    HTML:

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

    Edit: si sólo desea rellenar el contenido de la celda, y no el espacio que les puede simplemente usar

    <table cellpadding="10">

    O

    td {
        padding: 10px;
    }
    • border-spacing es compatible en IE8, pero no las versiones anteriores. border-collapse puede ser utilizado para lograr cellspacing="0" a través de navegadores, pero no los valores más altos.
    • Oh! ESA ES la clave! Me preguntaba si no había otra propiedad de actuar sobre el espaciado… y es border-collapse! Gracias!
    • border-spacing parece que no funciona en las últimas versiones de Firefox
    • cellpadding no es compatible con HTML5!
  2. 23

    Aquí está la cosa que usted debe entender acerca de las tablas… Que no eres un árbol de anidado de elementos independientes. Son un solo elemento compuesto. Mientras que el individuo TDs se comportan más o menos como CSS elementos de bloque, el intermedio cosas (cualquier cosa que entre la TABLA y TD, incluyendo TRs y TBODYs) es indivisible y no caer en cualquiera de en línea ni bloque. No aleatoria de los elementos HTML se permiten en que otras dimensiones del espacio, y el tamaño de esas otras dimensiones del espacio no es configurable a través de CSS. Sólo el HTML cellspacing propiedad puede incluso llegar a ella, y que la propiedad no tiene ningún análogo en el CSS.

    Entonces, para solucionar su problema, me gustaría sugerir un DIV contenedor como otro cartel indica, o si usted absolutamente debe mantener contenida en la tabla, usted tiene esta fea no deseado:

    <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>
    • También es posible el uso de CSS pseudo elementos (:first-child, :last-child) en lugar de la adición de (.en primer lugar .el último) de las clases.
    • Sí, hoy en día, pero me contestó que esta en el 2009!
  3. 5

    No se puede… tal vez si usted se publicó una foto de el efecto deseado hay otra manera de conseguirlo.

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

  4. 5

    Divertido, me estaba haciendo precisamente esto ayer. Solo necesitas esto en tu archivo css

    .ablock table td {
         padding:5px;
    }

    a continuación, ajustar la tabla en un div

    <div class="ablock ">
    <table>
      <tr>
        <td>
    • La forma más fácil y a prueba de balas enfoque.
  5. 2

    Con css, una tabla puede tener relleno de forma independiente de sus células.

    La propiedad de relleno no es heredado por sus hijos.

    Así, la definición de:

    table {
        padding: 5px;
    }

    Debería funcionar. Usted también podría específicamente indica al navegador cómo pad (o en este caso, no pad) de las células.

    td {
        padding: 0px;
    }

    EDICIÓN: No admite IE8. Lo siento.

    • No veo de relleno como una tabla de la propiedad en cualquier lugar, es?
    • El relleno no es un HTML de la propiedad de la tabla, pero es definibles en CSS. Sin embargo, no todos los navegadores lo soportan.
  6. 2

    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 que en mi trabajo actual)

  7. 1

    CSS no permite realmente hacer esto en un nivel de tabla. En general, puedo especificar cellspacing="3" cuando quiero conseguir este efecto. Obviamente no es una solución css, así que tomar para lo que vale.

  8. 0
    table {
        border: 1px solid transparent;
    }
    • Bienvenido a stackoverflow ! Por favor explique su respuesta.
    • En caso de que no necesitan a distinguir el borde de la tabla (quiero decir, darle un color), simplemente puede hacer que el borde transparente y simular relleno entre el borde de tabla y su contenido. En caso de que usted necesita para distinguir el borde de la tabla, se puede simular la inserción de la tabla en un DIV padre con un color de fondo diferente. Compruebe este violín: jsfiddle.net/34fq0gru/1
  9. 0
    table {
        background: #fff;
        box-shadow: 0 0 0 10px #fff;
        margin: 10px;
        width: calc(100% - 20px); 
    }
    • Esta pregunta ha sido contestada y aceptado hace 7 años.

Dejar respuesta

Please enter your comment!
Please enter your name here