¿Espacio entre dos filas en una mesa?

¿Es esto posible a través de CSS?

Lo estoy intentando

tr.classname {
  border-spacing: 5em;
}

en vano. Tal vez estoy haciendo algo mal?

Necesitas usar relleno en tus tdelementos. Algo como esto debería hacer el truco. Por supuesto, puede obtener el mismo resultado utilizando un relleno superior en lugar de un relleno inferior.

En el código CSS a continuación, el signo mayor que significa que el relleno solo se aplica a tdelementos que son hijos directos a trelementos con la clase spaceUnder. Esto permitirá usar tablas anidadas. (Celda C y D en el código de ejemplo). No estoy muy seguro acerca de la compatibilidad del navegador para el selector secundario directo (piense en IE 6), pero no debería romper el código en ningún navegador moderno.

/* Apply padding to td elements that are direct children of the tr elements with class spaceUnder. */

tr.spaceUnder>td {
  padding-bottom: 1em;
}

<table>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
    <tr class="spaceUnder">
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>E</td>
      <td>F</td>
    </tr>
  </tbody>
</table>

Esto debería ser algo así:

+---+---+
| A | B |
+---+---+
| C | D |
|   |   |
+---+---+
| E | F |
+---+---+

En la tabla principal, intente configurar

border-collapse:separate; 
border-spacing:5em;

Además de una declaración de borde, y vea si esto logra el efecto deseado. Sin embargo, tenga en cuenta que IE no admite el modelo de "bordes separados".

Tienes una tabla con álbumes de identificación con cualquier dato ... He omitido los trs y tds

<table id="albums" cellspacing="0">       
</table>

En el css:

table#albums 
{
    border-collapse:separate;
    border-spacing:0 5px;
}

Como tengo una imagen de fondo detrás de la mesa, fingirlo con relleno blanco no funcionaría. Opté por poner una fila vacía entre cada fila de contenido:

<tr class="spacer"><td></td></tr>

luego use css para dar a las filas espaciadoras una cierta altura y fondo transparente.

Desde la red de desarrolladores de Mozilla :

La propiedad CSS de espacio entre bordes especifica la distancia entre los bordes de las celdas adyacentes (solo para el modelo de bordes separados). Esto es equivalente al atributo de espacio de celdas en HTML de presentación, pero se puede usar un segundo valor opcional para establecer diferentes espacios horizontales y verticales.

Esa última parte a menudo se supervisa. Ejemplo:

.your-table {
    border-collapse: separate; /* allow spacing between cell borders */
    border-spacing: 0 5px; /* NOTE: syntax is <horizontal value> <vertical value> */

ACTUALIZAR

Ahora entiendo que el OP quiere filas separadas específicas para tener un mayor espacio. He agregado una configuración con tbodyelementos que logra eso sin arruinar la semántica. Sin embargo, no estoy seguro de si es compatible con todos los navegadores. Lo hice en Chrome.

El siguiente ejemplo es para mostrar cómo puede hacer que parezca que la tabla existe de filas separadas, dulzura completa de CSS. También le dio a la primera fila más espacio con la tbodyconfiguración. ¡Siéntase libre de usar!

Aviso de soporte: IE8 +, Chrome, Firefox, Safari, Opera 4+

.spacing-table {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 15px;
  border-collapse: separate;
  table-layout: fixed;
  width: 80%;
  border-spacing: 0 5px; /* this is the ultimate fix */
}
.spacing-table th {
  text-align: left;
  padding: 5px 15px;
}
.spacing-table td {
  border-width: 3px 0;
  width: 50%;
  border-color: darkred;
  border-style: solid;
  background-color: red;
  color: white;
  padding: 5px 15px;
}
.spacing-table td:first-child {
  border-left-width: 3px;
  border-radius: 5px 0 0 5px;
}
.spacing-table td:last-child {
  border-right-width: 3px;
  border-radius: 0 5px 5px 0;
}
.spacing-table thead {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.spacing-table tbody {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-spacing: 0 10px;
}

<table class="spacing-table">
  <thead>
    <tr>
        <th>Lead singer</th>
        <th>Band</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>Bono</td>
        <td>U2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
        <td>Chris Martin</td>
        <td>Coldplay</td>
    </tr>
    <tr>
        <td>Mick Jagger</td>
        <td>Rolling Stones</td>
    </tr>
    <tr>
        <td>John Lennon</td>
        <td>The Beatles</td>
    </tr>
  </tbody>
</table>

Puede intentar agregar una fila de separación:

html:

<tr class="separator" />

css:

table tr.separator { height: 10px; }

No puede cambiar el margen de una celda de la tabla. Pero PUEDES cambiar el relleno. Cambie el relleno del TD, lo que agrandará la celda y alejará el texto del costado con el relleno aumentado. Sin embargo, si tiene líneas de borde, todavía no será exactamente lo que desea.

Eche un vistazo al borde de colapso: atributo separado (predeterminado) y la propiedad de espacio de borde .

En primer lugar, usted tiene que separar con border-collapse , a continuación, se puede definir el espacio entre columnas y filas con espaciado de borde .

Ambas propiedades CSS son realmente compatibles con todos los navegadores, consulte aquí .

table     {border-collapse: separate;  border-spacing: 10px 20px;}

table, 
table td,
table th  {border: 1px solid black;}

<table>
  <tr>
    <td>Some text - 1</td>
    <td>Some text - 1</td>
  </tr>
  <tr>
    <td>Some text - 2</td>
    <td>Some text - 2</td>
  </tr>
  <tr>
    <td>Some text - 3</td>
    <td>Some text - 3</td>
  </tr>
</table>

Ok puedes hacer

tr.classname td {background-color:red; border-bottom: 5em solid white}

Asegúrese de que el color de fondo esté configurado en el td en lugar de en la fila. Esto debería funcionar en la mayoría de los navegadores ... (Chrome, es decir, & ff probado)

Tienes que poner border-collapse: separate;sobre la mesa; la mayoría de las hojas de estilo predeterminadas del navegador comienzan en border-collapse: collapse;, lo que elimina el espacio entre bordes.

Además, el espacio entre bordes: va en TD, no en TR.

Tratar:

<html><head><style type="text/css">
    #ex    { border-collapse: separate; }
    #ex td { border-spacing: 1em; }
</style></head><body>
    <table id="ex"><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>
</body>

Puede usar line-height en la tabla:

<table style="width: 400px; line-height:50px;">

tr { 
    display: block;
    margin-bottom: 5px;
}

Una respuesta demasiado tarde :)

Si aplica flotante a trelementos, puede espaciar entre dos filas con marginatributo.

table tr{
float: left
width: 100%;
}

tr.classname {
margin-bottom:5px;
}

Para crear una ilusión de espacio entre filas, aplique el color de fondo a la fila y luego cree un borde grueso con color blanco para que se cree un "espacio" :)

tr 
{
   background-color: #FFD700;
   border: 10px solid white;
}

La forma correcta de dar espacio para las tablas es usar el relleno de celdas y el espacio de celdas, por ejemplo

<table cellpadding="4">

Me topé con esto mientras luchaba con un problema similar. La respuesta de Varun Natraaj me pareció bastante útil, pero en su lugar usaría un borde transparente.

td { border: 1em solid transparent; }

Los bordes transparentes aún tienen ancho.

Funciona para la mayoría de los navegadores más recientes en 2015. Solución simple. No funciona para transparente, pero a diferencia de la respuesta de Thoronwen, no puedo obtener transparente para renderizar con cualquier tamaño.

    tr {
      border-bottom:5em solid white;
    }

Simplemente coloque divdentro tdy configure los siguientes estilos de div:

margin-bottom: 20px;
height: 40px;
float: left;
width: 100%;

Me doy cuenta de que esta es una respuesta a un hilo antiguo y puede que no sea la solución solicitada, pero aunque todas las soluciones sugeridas no hicieron lo que necesitaba, esta solución funcionó para mí.

Tenía 2 celdas de tabla, una con color de fondo y la otra con un color de borde. Las soluciones anteriores eliminan el borde, por lo que la celda de la derecha parecería estar flotando en el aire. La solución que hizo el truco fue reemplazar el table, try tdcon divs y clases correspondientes: la tabla sería div id="table_replacer", tr sería div class="tr_replacer"y td sería div class="td_replacer"(obviamente, cambiar las etiquetas de cierre a divs)

Para obtener la solución para mi problema, el CSS es:

#table_replacer{display:table;}
.tr_replacer {border: 1px solid #123456;margin-bottom: 5px;}/*DO NOT USE display:table-row! It will destroy the border and the margin*/
.td_replacer{display:table-cell;}

Espero que esto ayude a alguien.

Puede llenar los elementos <td /> con elementos <div /> y aplicar cualquier margen a los divs que desee. Para un espacio visual entre las filas, puede usar una imagen de fondo repetitiva en el elemento <tr />. (Esta fue la solución que acabo de usar hoy, y parece funcionar tanto en IE6 como en FireFox 3, aunque no lo probé más).

Además, si no desea modificar el código de su servidor para colocar <div /> s dentro de <td /> s, puede usar jQuery (o algo similar) para envolver dinámicamente el contenido de <td /> en un <div / >, permitiéndole aplicar el CSS como desee.

O simplemente agregue un espacio en blanco con la altura del margen entre las filas en las que desea agregar el espacio

Aquí hay una solución simple y elegante, con algunas advertencias:

• En realidad, no puede hacer que los espacios sean transparentes, debe darles un color específico.
• No puede redondear las esquinas de los bordes encima y debajo de los espacios
• Debe conocer el relleno y los bordes de las celdas de la tabla.

Con eso en mente, intente esto:

td {padding:5px 8px;border:2px solid blue;background:#E0E0E0}  /* lets say the cells all have this padding and border, and the gaps should be white */

tr.gapbefore td {overflow:visible}
tr.gapbefore td::before,
tr.gapbefore th::before
{
  content:"";
  display:block;
  position:relative;
  z-index:1;
  width:auto;
  height:0;
  padding:0;
  margin:-5px -10px 5px;  /* 5px = cell top padding, 10px = (cell side padding)+(cell side border width)+(table side border width) */
  border-top:16px solid white;  /* the size & color of the gap you want */
  border-bottom:2px solid blue; /* this replaces the cell's top border, so should be the same as that. DOUBLE IT if using border-collapse:separate */
}

Lo que realmente está haciendo es pegar un ::beforebloque rectangular en la parte superior de todas las celdas en la fila que desea precedido por un espacio. Estos bloques sobresalen un poco de las celdas para superponer los bordes existentes, ocultándolos. Estos bloques son solo un borde superior e inferior intercalados: el borde superior forma el espacio y el borde inferior recrea la apariencia del borde superior original de las celdas.

Tenga en cuenta que si tiene un borde alrededor de la tabla en sí y de las celdas, deberá aumentar aún más el margen horizontal -ve de sus 'bloques'. Entonces, para un borde de tabla de 4px, en su lugar usaría:

margin:-5px -12px 5px;     /* 14px = original 10px + 2px for 'uncollapsed' part of table border */

Y si su tabla usa en border-collapse:separatelugar de border-collapse:collapse, entonces necesitará (a) usar el ancho completo del borde de la tabla:

margin:-5px -14px 5px;     /* 14px = original 10px + 4px full width of table border */

... y también (b) reemplace el doble ancho del borde que ahora debe aparecer debajo del espacio:

border-bottom:4px solid blue;     /* i.e. 4px = cell top border + previous row's bottom border */

La técnica se adapta fácilmente a una versión .gapafter, si lo prefiere, o para crear espacios verticales (columnas) en lugar de espacios de filas.

Aquí hay un codepen donde puedes verlo en acción: https://codepen.io/anon/pen/agqPpW

Aquí esto funciona sin problemas:

#myOwnTable td { padding: 6px 0 6px 0;}

Supongo que podría elaborar un diseño más fino especificando qué td si es necesario.

haciendo esto como se muestra arriba ...

table tr{ float: left width: 100%; }  tr.classname { margin-bottom:5px; } 

elimina la alineación vertical de la columna, así que tenga cuidado de cómo lo usa

Has probado:

tr.classname { margin-bottom:5em; }

Alternativamente, cada td se puede ajustar también:

td.classname { margin-bottom:5em; }

o

 td.classname { padding-bottom:5em; }