html - formato - Controlar el espacio entre las celdas de la tabla

formato tabla html

Question

Intento crear una tabla donde cada celda tenga un color de fondo con espacios en blanco entre ellos. Pero parece que tengo problemas para hacer esto.

Intenté establecer los márgenes de td pero parece no tener ningún efecto.

table.myclass td {
    background-color: lime;
    margin: 12px 12px 12px 12px;
}​

Si hago lo mismo con el relleno, funciona, pero no tengo el espacio entre las celdas.

¿Podría alguien ayudarme con esto?

jsFiddle: http://jsfiddle.net/BfBSM/

Answer 1

Mira este fiddle . Necesitará echar un vistazo al uso del colapso de bordes y el espaciado de bordes. Hay algunas peculiaridades para IE (como siempre). Esto se basa en una respuesta a esta pregunta .

HTML:

<table class="test">
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
</table>​

CSS:

table.test td {
    background-color: lime;
    margin: 12px 12px 12px 12px;
    padding: 12px 12px 12px 12px;
}
table.test {
    border-collapse: separate;
    border-spacing: 10px;
    *border-collapse: expression(''separate'', cellSpacing = ''10px'');
}

Answer 2

Para hacer el trabajo, usa

<table cellspacing=12>

Si prefiere "tener la razón" antes de hacer las cosas, puede utilizar el border-spacing propiedad CSS, que es compatible con algunos navegadores.

Answer 3

Use colapso de borde y espacio en el borde para obtener espacios entre las celdas de la tabla. No recomendaría el uso de celdas flotantes como lo sugiere QQping.

JSFiddle

Answer 4

Utilice la propiedad de border-spacing en el elemento de la table para establecer el espacio entre las celdas.

Asegúrese de que border-collapse esté configurado como separate (o habrá un solo borde entre cada celda en lugar de un borde separado alrededor de cada uno que pueda tener espaciado entre ellos).

Answer 5

table.test td {
    background-color: lime;
    padding: 12px;
    border:2px solid #fff;border-collapse:separate;
}