Pregunta

En mi documento HTML, tengo una tabla con dos columnas y varias filas. ¿Cómo puedo aumentar el espacio entre la primera y la segunda columna con CSS? He intentado aplicar "margin-right: 10px;" a cada una de las células en el lado izquierdo, pero sin ningún efecto.

¿Fue útil?

Solución

Aplicar esto a su primera <td>: 

padding-right:10px;

HTML ejemplo: 

<table>
   <tr>
      <td style="padding-right:10px">data</td>
      <td>more data</td>
   </tr>
</table>

Otros consejos

Una palabra de advertencia: aunque padding-right podría resolver su problema particular (visual), no es el camino correcto para agregar espaciado entre celdas de la tabla. Lo que hace padding-right para una célula es similar a lo que hace la mayoría de los otros elementos: se añade espacio dentro de de la célula. Si las células no tienen un color de borde o fondo, o alguna otra cosa que le da al juego de distancia, esto puede imitar el efecto de establecer el espacio entre las células, pero no lo contrario.

Como alguien señaló, especificaciones de los márgenes se ignoran para las celdas:

CSS 2.1 Especificación - Tablas - Composición visual de contenidos de la tabla

  

elementos de una tabla interna generan   cajas rectangulares con contenido y   fronteras. Las células tienen acolchado también.   elementos de la tabla internos no tienen   márgenes.

¿Cuál es la manera "correcta", entonces? Si usted está buscando para reemplazar el atributo cellspacing de la tabla, a continuación, border-spacing (con border-collapse desactivado) es un reemplazo. Sin embargo, si se requieren "márgenes" por celda, no estoy seguro de cómo se puede lograr correctamente el uso de CSS. El único truco que se me ocurre es utilizar padding que el anterior, evitar cualquier estilo de las células (los colores de fondo, bordes, etc.) y en lugar de utilizar los DIV contenedores en el interior de las células para implementar tal estilo.

No soy un experto en CSS, por lo que bien podría estar equivocado en el anterior (que sería bueno saber! Yo también quisiera una solución CSS margen de celda de la tabla).

Saludos!

Si no puede utilizar el relleno (por ejemplo, tiene fronteras en td) prueba este 

table { 
           border-collapse: separate;
           border-spacing: 2px;
}

Me di cuenta que es bastante tardía, pero para el registro, también se puede utilizar selectores CSS para hacer esto (eliminando la necesidad de estilos en línea.) Este CSS se aplica el relleno a la primera columna de cada fila: 

table > tr > td:first-child { padding-right:10px }

Y este sería el código HTML, CSS sans: 

<table><tr><td>data</td><td>more data</td></tr></table>

Esto permite un margen de beneficio mucho más elegante, especialmente en los casos en que hay que hacer un montón de formato específico con CSS.

margen por desgracia no funciona en las células individuales, sin embargo, puede agregar columnas adicionales entre las dos celdas que desea poner un espacio entre ... otra opción es utilizar una frontera con el mismo color que el fondo ...

Usted puede simplemente hacer eso: 

<html>
<table>
    <tr>
        <td>one</td>
        <td width="10px"></td>
        <td>two</td>
    </tr>
</table>
</html>

No se requiere CSS :) Este es su espacio de 10px.

Trate padding-right. No se te permite poner margin de entre las células. 

<table>
   <tr>
      <td style="padding-right: 10px;">one</td>
      <td>two</td>
   </tr>
</table>

Con border-collapse:. Separada; no funcionó para mí, porque yo sólo necesito un margen de entre las celdas de la tabla y no en los lados de la mesa

Se me ocurrió la siguiente solución:

- CSS 

.tableDiv{
    display: table;
}

.cellSeperator {
    display: table-cell;
    width: 20px;
}

.cell1 {
    display: table-cell;
    width: 200px;
}

.cell2 {
    display: table-cell;
    width: 50px;
}

- HTML 

<div class="tableDiv">
    <div class="cell1"></div>
    <div class="cellSeperator"></div>
    <div class="cell2"></div>
</div>

Este trabajo de solución para td que necesitan tanto border y padding para el peinado.
 (Probado en Chrome 32, IE 11, Firefox 25) 

CSS:
table {border-collapse: separate; border-spacing:0; }   /*  separate needed      */
td { display: inline-block; width: 33% }  /*  Firefox need inline-block + width  */
td { position: relative }                 /*  needed to make td move             */
td { left: 10px; }                        /*  push all 10px                      */
td:first-child { left: 0px; }             /*  move back first 10px               */
td:nth-child(3) { left: 20px; }           /*  push 3:rd another extra 10px       */

/*  to support older browsers we need a class on the td's we want to push
    td.col1 { left: 0px; }
    td.col2 { left: 10px; }
    td.col3 { left: 20px; }
*/

HTML:
<table>
    <tr>
        <td class='col1'>Player</td>
        <td class='col2'>Result</td>
        <td class='col3'>Average</td>
    </tr>
</table>

Actualización 2016

Firefox ahora soporta sin inline-block y una width conjunto 

table {border-collapse: separate; border-spacing:0; }
td { position: relative; padding: 5px; }
td { left: 10px; }
td:first-child { left: 0px; }
td:nth-child(3) { left: 20px; }
td { border: 1px solid gray; }


/* CSS table */
.table {display: table; }
.tr { display: table-row; }
.td { display: table-cell; }

.table { border-collapse: separate; border-spacing:0; }
.td { position: relative; padding: 5px; }
.td { left: 10px; }
.td:first-child { left: 0px; }
.td:nth-child(3) { left: 20px; }
.td { border: 1px solid gray; }
<table>
  <tr>
    <td>Player</td>
    <td>Result</td>
    <td>Average</td>
  </tr>
</table>

<div class="table">
  <div class="tr">
    <div class="td">Player</div>
    <div class="td">Result</div>
    <div class="td">Average</div>
  </div>
</div>

No se puede destacar columnas individuales en una celda de esa manera. En mi opinión, la mejor opción es añadir un style='padding-left:10px' en la segunda columna y aplicar los estilos en una div interno o elemento. De esta manera se puede lograr la ilusión de un espacio más grande.

Si usted tiene el control de la anchura de la tabla, insertar un padding-left en todas las celdas de la tabla e insertar un negativo margen izquierda en toda la tabla. 

table {
    margin-left: -20px;
    width: 720px;
}

table td {
    padding-left: 20px;
}

Nota, la anchura de la tabla debe incluir la anchura de relleno / margen. Utilizando el anterior como ejemplo, la anchura visual de la tabla será 700px.

Esta no es la mejor solución si estás usando fronteras en sus celdas de la tabla.

SOLUCIÓN

He encontrado la mejor manera de resolver este problema fue una combinación de ensayo y error y leer lo que estaba escrito antes que yo:

http://jsfiddle.net/MG4hD/


Como se puede ver que tengo algunas cosas bastante complicado pasando ... Pero el truco principal de conseguir esto a buen aspecto son:

elemento padre (UL): border-collapse: separada; espaciado de borde: .25em; margin-left: -.25em;
Elementos secundarios (LI): display: table-cell; vertical-align: media;

HTML 

<ul>
<li><span class="large">3</span>yr</li>
<li>in<br>stall</li>
<li><span class="large">9</span>x<span class="large">5</span></li>
<li>on<br>site</li>
<li>globe</li>
<li>back<br>to hp</li>
</ul>

CSS 

ul { border: none !important; border-collapse: separate; border-spacing: .25em; margin: 0 0 0 -.25em; }
li { background: #767676 !important; display: table-cell; vertical-align: middle; position: relative; border-radius: 5px 0; text-align: center; color: white; padding: 0 !important; font-size: .65em; width: 4em; height: 3em; padding: .25em !important; line-height: .9; text-transform: uppercase; }

Después de solución de establecer una frontera en lugar de un margen de Cian, descubrí puede establecer color de borde a transparente para evitar tener que coincida con el color de fondo. Funciona en FF17, IE9, Chrome v23. Parece que una solución decente siempre que NO se necesita también una frontera real. 

<!DOCTYPE html>
<html>
<head>
<style>
table{
border-spacing: 16px 4px;
}

 td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>		
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>		
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>		
    <td>80</td>
  </tr>
</table>

</body>
</html>

El uso de relleno no es forma correcta de hacerlo, puede cambiar el aspecto, pero no es lo que quería. Esto puede resolver su problema.

Puede utilizar ambos: 

padding-right:10px;

padding-right:10%;

Pero es mejor utilizar con % .

Si el relleno no está funcionando para ti, otra solución es añadir columnas adicionales y establecer un margen ancho de vía utilizando <colgroup>. Ninguna de las soluciones de relleno anteriormente estaban trabajando para mí como yo estaba tratando de dar el propio borde de la celda un margen, y esto es lo que resuelve el problema en el final: 

<table>
  <colgroup>
    <col>
    <col width="20px">
    <col>
  </colgroup>
  <tr>
     <td>data</td>
     <td></td>
     <td>more data</td>
   </tr>
</table>

Estilo de los bordes de las celdas de la tabla utilizando:. Nth-child modo que la 2da y tercera columnas parecen ser una sola columna 

table tr td:nth-child(2) { border: 1px solid black; border-right:0; }
table tr td:nth-child(3) { border: 1px solid black; border-left:0; }
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top