Pregunta 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?


670
2017-12-08 21:49


origen


Respuestas:


Necesita usar relleno en su td elementos. 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 de mayor que significa que el relleno solo se aplica a td elementos que son niños directos a tr elementos con la clase spaceUnder. Esto hará posible usar tablas anidadas. (Célula C y D en el código de ejemplo). No estoy muy seguro del soporte del navegador para el selector directo de niños (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 representar algo como esto:

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

474
2017-12-10 17:18



En la tabla primaria, intente configurar

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

Además de una declaración en el borde, y ver si esto logra el efecto deseado. Sin embargo, ten en cuenta que IE no admite el modelo de "fronteras separadas".


319
2017-12-08 21:52



Tienes una tabla con álbumes de id 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;
}

163
2017-10-20 13:49



dado que tengo una imagen de fondo detrás de la mesa, fingir 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 cierta altura y fondo transparente.


122
2017-08-09 02:41



De Mozilla Developer Network:

La propiedad CSS que separa el borde 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 celda en HTML de presentación, pero se puede usar un segundo valor opcional para establecer diferentes espaciamientos horizontales y verticales.

Esa última parte a menudo es supervisada. 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 espaciado aumentado. He agregado una configuración con tbody elementos que lo logran sin arruinar la semántica. Sin embargo, no estoy seguro de si es compatible con todos los navegadores. Lo hice en Chrome.

El ejemplo a continuación es para mostrar cómo puede hacer que parezca que la tabla existe de filas separadas, dulzura css completa. También le dio a la primera fila más espacio con el tbody preparar. ¡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>


57
2018-02-27 13:57



Puede intentar agregar una fila de separador:

html:

<tr class="separator" />

css:

table tr.separator { height: 10px; }

52
2017-08-23 19:44



No puede cambiar el margen de una celda de tabla. Pero PUEDE cambiar el relleno. Cambia el relleno del TD, lo que hará que la celda sea más grande y empujará el texto hacia un lado con el acolchado aumentado. Sin embargo, si tiene líneas de borde, todavía no será exactamente lo que desea.


46
2017-12-08 21:59