Espaciado horizontal de celdas de tablas CSS: ¿cómo?

Esperemos que esta sea una tarea fácil, pero no he encontrado una solución. Quiero poner espacio entre columnas en una mesa.Espaciado horizontal de celdas de tablas CSS: ¿cómo?

Ejemplo

| Cell |<- space ->| Cell |<- space ->| Cell |

Un punto importante es que no quiero espacio en los bordes. Hay una propiedad de espacio entre bordes pero no es compatible con IE (6 o 7), por lo que no es bueno. También pone espacio en los bordes.

Lo mejor que se me ocurre es poner un pad-right: 10px en las celdas de mi tabla y agregar una clase a la última para eliminar el relleno. Esto es menos que ideal porque el espacio extra es parte de la célula que no está fuera de él. ¿Supongo que podrías hacer lo mismo con un borde transparente?

También probé usando jQuery:

$(function() { 
    $("table > tbody > tr:not(:last-child").addClass("right-padding"); 
});

pero incluso en las tablas que son sólo ~ 100 filas de tamaño esto ocurría 200-400ms en algunos casos, lo cual es demasiado lento.

Cualquier ayuda apreciada.

Gracias

Para aquellas columnas que sugieren que no funcionan. Intente esto:

<html> 
<head> 
    <title>Layout</title> 
    <style type="text/css"> 
    table { border: 1px solid black; } 
    td { background: yellow; } 
    </style> 
</head> 
<body> 
<table> 
<col style="padding-right: 30px;"> 
<col style="padding-right: 30px;"> 
<col> 
<tr> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
</tr> 
<tr> 
    <td>4</td> 
    <td>5</td> 
    <td>6</td> 
</tr> 
<tr> 
    <td>7</td> 
    <td>8</td> 
    <td>9</td> 
</tr> 
</table> 
</body> 
</html>

Fuente

2009-03-17 Jordie

Su ejemplo "columnas" funciona perfectamente para mí! –

¿Qué navegador?En Firefox fo me Firebug muestra las columnas más grandes que la tabla, pero las celdas de la tabla en realidad no están redimensionadas (es decir, las columnas según Firebug se extienden más allá de la tabla). – Jordie

Chrome no funciona. IE lo hace sin embargo. Weird – Jordie

¿Intentó utilizar la agrupación de colmas?

<table> 
    <colgroup> 
     <col class="right-padding" /> 
     <col class="right-padding" /> 
     <col /> 
    </colgroup> 
    <tbody> 
     <tr> 
      <td> 
      </td> 
      <td> 
      </td> 
      <td> 
      </td> 
     </tr> 
    </tbody> 
</table>

Fuente

2009-03-17 22:06:51 Joel

No funciona. Véase más arriba. – Jordie

tratar de usar col s

ejemplo

<table> 
    <col style="padding-right:20px;" /> 
    <col style="padding-right:30px;" /> 
    <col /> 
    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
</table>

cols también apoyan clases :)

esperanza esto ayuda

Darko

EDITAR: Para aclarar un col es un elemento declarado en la parte superior de la tabla para influir en columnas enteras. El primer elemento col influirá en la primera columna, el segundo col = segunda columna y así sucesivamente. Se pueden agrupar en colgroups si desea asignar el mismo estilo a más de una columna.

Edit2: Después de algunas investigaciones más resulta que los únicos estilos fiables se pueden establecer en un elemento col son:

frontera
fondo
ancho
visibilidad

Sin margen o relleno. ¡Tío! ¿El establecimiento del ancho de las columnas resolvería su problema de manera explícita?

Fuente

2009-03-17 22:07:16

No funciona. Véase más arriba. – Jordie

La adición de marcado para fines de diseño es un no-no semántico. –

También podría considerar el uso de una serie de divs de ancho fijo flotados a la izquierda con márgenes.Esto podría darle un poco más de control sobre el diseño del elemento.

.row div { 
    margin-right: 10px; 
    float: left; 
    width: 50px; 
} 

    <div class="row"> 
     <div>Cell One</div> 
     <div>Cell Two</div> 
     <div>Cell Three</div> 
    </div>

Fuente

2009-03-17 22:10:43

Errr .. estamos abogando por usar divs incluso para datos tabulares ahora? – cletus

No, pero el OP parece tener dificultades para lograr el estilo que desea con el elemento de tabla. Las tablas son ciertamente mejores para los datos tabulares. –

¿Qué tal si agregamos una celda vacía que funciona como espaciador? Se podría utilizar la etiqueta col indicada anteriormente, para dar a las celdas vacías de una cierta anchura

<col/> 
<col style="width:20px"/> 
<col/> 
<col style="width:20px"/> 
<col/> 
<tr> 
    <td>Data</td> 
    <td>& nbsp;</td> 
    <td>Data</td> 
    <td>& nbsp;</td> 
    <td>Data</td> 
</tr>

O si quieres hacer algo más con ellos, sólo tiene que añadir clases a ellos en lugar de un estilo en línea usin ...

Fuente

2009-03-18 07:01:58 peirix

¿Utiliza más marcado para diseñar? Guau. Esta es una idea horrible –

Después de leer todas las respuestas anteriores, la sugerencia de peirix es la única que funciona y funciona en todos los navegadores. Sí, usar el marcado para diseñar es generalmente una mala idea, pero en mi caso particular, esto es lo único que funciona. La idea de espacio entre los bordes está cerca, pero termina poniendo el espacio entre la etiqueta: valor (las dos primeras celdas de TD), que se ve mal. –

¿Qué le parece dar a cada tabla celda un borde transparente? Estoy bastante seguro de que lo hará por usted ...

table td { 
    border:solid 5x transparent; 
}

y sólo se puede aplicar horizontal así ...

table td { 
    border-left:solid 10px transparent; 
} 
table td:first-child { 
    border-left:0; 
}

He aquí una demostración de trabajo completo de lo que creo que está tratando de lograr ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html> 
    <head> 
    <title>Layout</title> 
    <style type="text/css"> 
     table { 
     border: 1px solid black; 
     } 

     table td { 
     background: yellow; 
     border-left:solid 10px transparent; 
     } 

    table td:first-child { 
     border-left:0; 
    } 
    </style> 
    </head> 
    <body> 
    <table> 
     <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     </tr> 
     <tr> 
     <td>4</td> 
     <td>5</td> 
     <td>6</td> 
     </tr> 
     <tr> 
     <td>7</td> 
     <td>8</td> 
     <td>9</td> 
     </tr> 
    </table> 
    </body> 
</html>

no creo IE6 soporta el CSS: first-child, asi que aquí hay una solución para que ...

<!–-[if IE 6]> 
<style type="text/css"> 
    table td { 
    border-left: expression(this.previousSibling == null ? '0' : 'solid 5px transparent'); 
    } 
</style> 
<![endif]-->

Fuente

2009-03-18 20:58:15

: first-child no es ampliamente compatible con CSS – Jordie

Me doy cuenta de eso. Se trata de elegir la mejor solución para los requisitos. –

He agregado una solución IE6 para usted, Jordie. –

-1

La respuesta de Josh es bastante buena, pero en mi opinión innecesariamente complicada. Cuando establece los bordes de la tabla en "oculto" y el modo colapsar para "colapsar", los bordes en los bordes exteriores de las columnas se eliminarán, tal como se requiere.

Ejemplo de trabajo:

de estilos:

table#my_table { 
    border-collapse: collapse; 
    border-style: hidden; 
} 

table#my_table td { 
    border-left: 15px solid transparent; 
    border-right: 15px solid transparent; 
}

HTML:

<table id="my_table"> 
    <tr> 
    <td>A1</td> 
    <td>A2</td> 
    <td>A3</td> 
    </tr> 
    <tr> 
    <td>B1</td> 
    <td>B2</td> 
    <td>B3</td> 
    </tr>   
</table>

Fuente

2011-07-14 13:58:41 martin

respuesta de Josh no funcionará si ya tiene bordes alrededor de sus células, como yo.

Resolví el problema desplazando la tabla entera ligeramente hacia la izquierda, usando "posición: relativa; izquierda: -10px". Combiné esto con el espacio de las células en la mesa.

<div id='sandbox'> 
    <table cellspacing='10'> 
      <tr> 
       <td class='smoothBox'> 
        ... 
       </td> 
       <td class='smoothBox'> 
        ... 
       </td> 
      </tr> 
    </table> 
</div>

y el css:

#sandbox { 
    float: left; 
    position: relative; /* move the whole sandbox */ 
    left: -11px;  /* slightly to the left */ 
    width: 950px; 
    margin-top: 0px; 
    padding: 1px; 
    text-align: left; 
} 
#sandbox table { 
    float: left; 
    width: 100%; 
} 
#sandbox td { 
    width: 300px; 
    vertical-align: top; 
}

Esto es lo que funciona para mí, espero que puede ayudar a usted también.

Fuente

2012-01-06 15:20:36 Timo

Se puede lo que están buscando el:

Se pueden utilizar dos valores: el primero es el espaciado de celda horizontal, el segundo el vertical.

<table style="border-spacing: 40px 10px;">

Fuente

2012-03-05 15:21:49 Lukas

¡Esta es realmente una buena, gracias! – lucaferrario

¡Genial! Dos limitaciones: el margen en el primer y el último espacio y Quirksmode implica puede no funcionar para IE7 y debajo http://www.quirksmode.org/css/tables.html – KCD

Si después de este estilo, el primer y/o último espacio entre columnas es un problema - puedes poner la tabla en un contenedor 'div' con márgenes' negativos a la derecha y a la izquierda'. –

Es un trabajo para mí

border-collapse: separate; border-spacing: 0px 3px;

Fuente

2015-01-25 09:47:41

Espaciado horizontal de celdas de tablas CSS: ¿cómo?

Respuesta

Cuestiones relacionadas