2012-06-06 11 views
14

recientemente descubrí que necesito utilizar el atributo de espaciado de celda en mi mesa, pero me preguntaba si podía conseguir que funcione sólo en horizontal. No quiero que se extienda verticalmente, eso arruina el diseño de toda mi página.¿Cómo aplico solo el espaciado horizontal de celdas a una tabla HTML?

+0

posible duplicado de [Cómo configurar el espaciado de celdas en las tablas solo horizontalmente] (http://stackoverflow.com/questions/12970826/how-to-set-cellspacing-in-tables-only-horizontally) –

Respuesta

26

Una mejor manera de establecer cellspacing="10" es el uso de CSS. Puede usar el siguiente CSS para apuntar el espaciado de celdas de la tabla.

table { 
    border-spacing: 10px 0; 
} 

El primer valor especifica el espaciado horizontal, y el segundo valor especifica el espaciado vertical.

+0

El 'border- la propiedad de espacio no es reconocida por IE 8 y anteriores. –

+0

Esto no funciona para mí en Chrome. Un borde transparente como se describe aquí hace: http://stackoverflow.com/questions/656207/css-horizontal-table-cell-spacing-how –

+2

también hay que añadir 'border-collapse: separada;' para que esto funcione – jtate

1

Si solo necesita establecer la celda contenidos aparte, use espaciado dentro de celdas (y establezca cellspacing=0 en HTML). Esto es universalmente compatible con navegadores habilitados para CSS.

Si realmente necesita separar las celdas, para que haya espacio entre sus bordes o su fondo de color, entonces border-spacing resolvería el problema, pero solo en navegadores compatibles.

Dependiendo del contexto, incluso podría considerar simular el espaciado celular colocando los contenidos de la celda en div, configurados para cubrir el área de la celda excepto el relleno deseado, que luego se verá como el espaciado celular. Luego establecería cualquier borde o fondo deseado en esos elementos div.

Cuestiones relacionadas