Cómo agregar un margen a una fila de tabla

La propiedad border-spacing funcionará para este caso particular.

table {
  border-collapse:separate; 
  border-spacing: 0 1em;
}

Referencia.

No puedes estilizar las <tr>s por sí mismas, pero puedes darle a las <td> s dentro de las" highlight " <tr>s un estilo, como este

tr.highlight td {padding-top: 10px; padding-bottom:10px}

La altura de la línea puede ser la solución posible

tr
{
    line-height:30px;
}

Sé que esto es un poco viejo, pero acabo de conseguir algo en las mismas líneas para trabajar. ¿No podrías hacer esto?

tr.highlight {
    border-top: 10px solid;
    border-bottom: 10px solid;
    border-color: transparent;
}

Espero que esto ayude.

En primer lugar, no intente poner un margen a <tr> o a <td> porque no funcionará en el renderizado moderno.

• Solución 1

Aunque el margen no funciona, el relleno funciona:

td{
    padding-bottom: 10px;
    padding-top: 10px;
}

Advertencia: Esto también empujará el borde más lejos del elemento, si su borde es visible, es posible que desee usar la solución 2 en su lugar.

• Solución 2

Para mantener la frontera cerca de la elemento e imitar el margen, poner otro <tr> entre cada uno de su mesa de rodillos <tr> así:

<tr style="height: 20px;"> <!-- Mimic the margin -->
</tr>

Debido a que margin se ignora en tr, generalmente uso una solución alternativa, estableciendo un border-bottom o border-top transparente y estableciendo la propiedad background-clip a padding-box para que el background-color no se pinte debajo del borde.

table {
   border-collapse: collapse; /* [1] */
}

th, td {
  border-bottom: 5px solid transparent; /* [2] */
  background-color: gold; /* [3] */
  background-clip: padding-box; /* [4] */
}

1. Se asegura de que las celdas compartan un borde común, pero es completamente opcional. La solución funciona sin ella.
2. El valor 5px representa el margen que desea alcanzar
3. Establece el background-color de su fila/celda
4. Se asegura de que el background no pintado debajo de la border

Vea una demostración aquí: http://codepen.io/meodai/pen/MJMVNR?editors=1100

background-clip es compatible con todos los navegadores modernos. (E IE9+)

Alternativamente puede usar un border-spacing. Pero esto no funcionará con border-collapse establecido en collapse.

Una forma de imitar el margen en la fila sería usar el pseudo selector para agregar algún espaciado en el td.

.highlight td::before, .highlight td::after
{
  content:"";
  height:10px;
  display:block;
}

De esta manera cualquier cosa marcada con la clase highlight se separará arriba y abajo.

Https://jsfiddle.net/d0zmsrfs/

Un truco para dar la apariencia de los márgenes entre las filas de la tabla es darles un borde del mismo color que el fondo. Esto es útil cuando se estila un tema de terceros donde no se puede cambiar el marcado html. Eg:

tr{ 
    border: 5px solid white;
}

He aquí una manera clara de hacerlo:

table tr {
    border-bottom: 4px solid;
}

Que agregará 4px de espaciado vertical entre cada fila. Y si quisieras no poner esa frontera en el último hijo:

table tr:last-child {
    border-bottom: 0;
}

Recordatorio de que los pseudo-selectores CSS3 solo funcionarán en IE 8 y por debajo con selectivizr.

Esto no va a ser exactamente perfecto, aunque me alegró descubrir que puede controlar el espaciado horizontal y vertical por separado:

table
{
 border-collapse: separate;
 border-spacing: 0 8px;
}

Puede intentar usar transformaciones CSS para sangrar un tr completo:

tr.indent {
   -webkit-transform: translate(20px,0);
   -moz-transform: translate(20px,0);
}

Creo que esta es una solución válida. Parece funcionar bien en Firefox 16, Chrome 23 y Safari 6 en mi OSX.

Me di por vencido e inserté un código jQuery simple como se muestra a continuación. Esto agregará un tr después de cada tr, si tienes tantos tr como yo. Demo: https://jsfiddle.net/acf9sph6 /

<table>
  <tbody>
     <tr class="my-tr">
        <td>one line</td>
     </tr>
     <tr class="my-tr">
        <td>one line</td>
     </tr>
     <tr class="my-tr">
        <td>one line</td>
     </tr>
  </tbody>
</table>
<script>
$(function () {
       $("tr.my-tr").after('<tr class="tr-spacer"/>');
});
</script>
<style>
.tr-spacer
{
    height: 20px;
}
</style>

Le sugiero encarecidamente que eche un vistazo a sus análisis y vea cuántos usuarios de IE7 o menos tiene visitando el sitio. He encontrado que ahora soy capaz de soltar el soporte para IE7, y eso significa que puedo usar tablas CSS... lo que hará que las cosas sean mucho más fáciles de trabajar.

Agregue este estilo antes de la clase = " resaltado" relleno-parte inferior y la pantalla es inline-table

Agregue un div a las celdas que le gustaría agregar un espacio adicional:

<tr class="highlight">
 <td><div>Value1</div></td>
 <td><div>Value2</div></td>
</tr>
tr.highlight td div {
margin-top: 10px;
}

Otra posibilidad es utilizar un pseudo selector: after o: before

tr.highlight td:last-child:after
{
  content: "\0a0";
  line-height: 3em;
}

Eso podría evitar problemas con el navegador que no entiende los pseudo selectores, además de los colores de fondo no son un problema.

La desventaja es, sin embargo, que añade algunos espacios en blanco extra después de la última celda.

Puede crear espacio entre las filas de la tabla agregando una fila vacía de celdas como esta...

<tr><td></td><td></td></tr>

CSS se puede usar para apuntar a las celdas vacías de esta manera {

table :empty{border:none; height:10px;}

NB: Esta técnica solo es buena si ninguna de sus células normales estará vacía/vacante.

Incluso un espacio sin ruptura servirá para evitar que una celda sea dirigida por la regla CSS anterior.

No hace falta mencionar que puedes ajustar la altura del espacio a lo que quieras con la altura propiedad incluida.