¿Cómo boost la distancia entre las columnas de la tabla en HTML?

Digamos que quería crear una tabla de una fila con 50 píxeles entre cada columna, pero 10 píxeles de relleno en la parte superior e inferior.

¿Cómo haría esto en HTML / CSS?

No hay ninguna necesidad de falsos

s. Utilice el border-spacing lugar. Aplicarlo así:

HTML:

 
First Column Second Column Third Column

CSS:

 table { border-collapse: separate; border-spacing: 50px 0; } td { padding: 10px 0; } 

Véalo en acción .

Establezca el ancho de los

s en 50px y luego agregue su

+ otro falso

Violín.

HTML:

 
First Column Second Column Third Column

CSS

 table tr td:empty { width: 50px; } table tr td { padding-top: 10px; padding-bottom: 10px; } 

Código explicado:

La primera regla CSS comprueba td vacías y les da un ancho de 50px luego la segunda regla da el relleno de la parte superior e inferior a todas las td.

Si entiendo correctamente, quieres este violín .

HTML:

 
Hello HTML! Hello CSS! Hello JS!

CSS:

 table { background: gray; } td { display: block; float: left; padding: 10px 0; margin-right:50px; background: white; } td:last-child { margin-right: 0; } 

Puedes usar relleno. Al igual que:

http://jsfiddle.net/davidja/KG8Kv/

HTML

  
item1 item2 item2

CSS

  td {padding:10px 25px 10px 25px;} 

O

  tr td:first-child {padding-left:0px;} td {padding:10px 0px 10px 50px;} 

Tratar

 padding : 10px 10px 10px 10px; 

Una solución mejor que la respuesta seleccionada sería usar el tamaño del borde en lugar del espacio entre los bordes. El principal problema al usar el espacio entre los bordes es que incluso la primera columna tendría un espacio en el frente.

Por ejemplo,

 table { border-collapse: separate; border-spacing: 80px 0; } td { padding: 10px 0; } 
 
First Column Second Column Third Column
1 2 3

Si necesita dar una distancia entre dos filas use esta etiqueta

 margin-top: 10px !important;