5

¿Existe alguna forma de poner un espacio en blanco en una tabla cada X filas?

Me da igual que sea con css, con jquery o con lo que sea.


Esto es lo que genera la página, y el espacio lo quiero poner en el recuadro rojo.

Las páginas se crean según se necesiten y se crean con un <page> </page> .

Dentro del espacio de artículos hay dos tablas, y los artículos están agrupados por un <tbody> para agrupar lo que sería el artículo (artículo de 20 líneas) y la descripción (Disco ssd chachi que te cargas).

No me importaría si tengo que sustituir la tabla por otra cosa para poder hacerlo.

factura

3
  • ¿lineas? ¿Te refieres a filas?
    – Rene Limon
    Commented el 29 dic. 2016 a las 21:00
  • @ReneLimon si, filas 😅 es la costumbre de no usar tablas
    – Killpe
    Commented el 29 dic. 2016 a las 21:01
  • 1
    ¿Esta pregunta fue resuelta?
    – A. Cedano
    Commented el 5 may. 2017 a las 22:11

3 respuestas 3

8

Puedes usar el selector nth-child(20n) para aplicar un estilo a las filas que sean 20 o múltiplo de 20. En este caso, entiendo que por espacio en blanco te refieres a dejar un margen respecto al resto de filas.

Sin embargo, tal y como ha dicho @MarcosGallardo, en mi repuesta original modificaba el display: table-row de las filas ya que les asignaba display: block para poder modificar el margen de las filas ya que estas, por defecto, no pueden tener margen.

Para no modificar el estilo de las tr y que parezca que hay un margen por la parte superior e inferior de la fila 20 o múltiplo de 20 lo que se puede hacer es asignar una altura a la línea de escritura mediante la propiedad line-height.

Posteriormente, podemos establecer el fondo blanco para esa fila en concreto para que parezca que hay un margen por la parte superior e inferior de la fila.

Ejemplo:

tr{
  background-color: red;
}

tr:nth-child(20n){
  line-height: 50px;
  background-color: white;
}
<table>
  <tr><td>Hola</td><td>Pepito</td></tr><tr><td>Hola</td><td>Pepito</td></tr>
  <tr><td>Hola</td><td>Pepito</td></tr><tr><td>Hola</td><td>Pepito</td></tr>
  <tr><td>Hola</td><td>Pepito</td></tr><tr><td>Hola</td><td>Pepito</td></tr>
  <tr><td>Hola</td><td>Pepito</td></tr><tr><td>Hola</td><td>Pepito</td></tr>
  <tr><td>Hola</td><td>Pepito</td></tr><tr><td>Hola</td><td>Pepito</td></tr>
  <tr><td>Hola</td><td>Pepito</td></tr><tr><td>Hola</td><td>Pepito</td></tr>
  <tr><td>Hola</td><td>Pepito</td></tr><tr><td>Hola</td><td>Pepito</td></tr>
  <tr><td>Hola</td><td>Pepito</td></tr><tr><td>Hola</td><td>Pepito</td></tr>
  <tr><td>Hola</td><td>Pepito</td></tr><tr><td>Hola</td><td>Pepito</td></tr>
  <tr><td>Hola</td><td>Pepito</td></tr><tr><td>Hola</td><td>Pepito</td></tr>
  <tr><td>Hola</td><td>Pepito</td></tr><tr><td>Hola</td><td>Pepito</td></tr>
  <tr><td>Hola</td><td>Pepito</td></tr><tr><td>Hola</td><td>Pepito</td></tr>
  <tr><td>Hola</td><td>Pepito</td></tr><tr><td>Hola</td><td>Pepito</td></tr>
  <tr><td>Hola</td><td>Pepito</td></tr><tr><td>Hola</td><td>Pepito</td></tr>
  <tr><td>Hola</td><td>Pepito</td></tr><tr><td>Hola</td><td>Pepito</td></tr>
  <tr><td>Hola</td><td>Pepito</td></tr><tr><td>Hola</td><td>Pepito</td></tr>
  <tr><td>Hola</td><td>Pepito</td></tr><tr><td>Hola</td><td>Pepito</td></tr>
  <tr><td>Hola</td><td>Pepito</td></tr><tr><td>Hola</td><td>Pepito</td></tr>
  <tr><td>Hola</td><td>Pepito</td></tr><tr><td>Hola</td><td>Pepito</td></tr>
  <tr><td>Hola</td><td>Pepito</td></tr><tr><td>Hola</td><td>Pepito</td></tr>
  <tr><td>Hola</td><td>Pepito</td></tr><tr><td>Hola</td><td>Pepito</td></tr>
</table>

1
  • Los comentarios no deben usarse para discusiones extendidas; esta conversación ha sido trasladada a un chat.
    – user227
    Commented el 30 dic. 2016 a las 14:28
3

Usando un poco de jquery y css puedes agregar cada x fila un elemento vacío que te separa la tabla a la altura que deseas.

Para simplificar el código hay una separación cada 5ª fila:

$('tr:nth-child(5n)').after('<tr class="break" />');
tr { background-color: pink; }
tr.break { height: 50px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tbody>
      <tr><td>Row 1</td></tr>
      <tr><td>Row 2</td></tr>
      <tr><td>Row 3</td></tr>
      <tr><td>Row 4</td></tr>
      <tr><td>Row 5</td></tr>    
      <tr><td>Row 6</td></tr>
      <tr><td>Row 7</td></tr>
      <tr><td>Row 8</td></tr>
      <tr><td>Row 9</td></tr>
      <tr><td>Row 10</td></tr>
      <tr><td>Row 11</td></tr>
      <tr><td>Row 12</td></tr>
      <tr><td>Row 13</td></tr>
      <tr><td>Row 14</td></tr>
      <tr><td>Row 15</td></tr>
    </tbody>
</table>

1
  • y en vez de por filas no se puede hacer por X altura? ósea tengo un espacio x para insertar filas. Las filas las tengo hechas con tbody ya que necesito 2 tr por fila y cada fila puede tener varias lineas, con lo que el espacio no siempre es fijo en filas pero si en heigth total del documento.
    – Killpe
    Commented el 6 ene. 2017 a las 20:43
2

Puedes agrupar de n filas usando <tbody>.

Una <table> puede tener cero o mas elementos <tbody>.

Ejemplo:

table {
  border-collapse: collapse;
}

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

table td {
  padding: 5px;
}

table tbody:after {
  content: "";
  display: block;
  height: 20px;
}
table tbody:last-child:after {
  height: 0;
}
<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>DESC</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Algo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Algo asda sd asd</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>3</td>
      <td>Algo</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Algo</td>
    </tr>
  </tbody>
</table>

2
  • Es un tbody :) mas o menos este es el codigo jsfiddle.net/qLpbpmnr/5
    – Killpe
    Commented el 30 dic. 2016 a las 13:26
  • @Killpe A simple vista la estructura de la table esta mal. ¿Que es lo que buscas hacer? ¿Puedes proveer un link a un ejemplo funcional para poder entender mejor que es lo que esperas conseguir?
    – Marcos
    Commented el 30 dic. 2016 a las 13:31

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.