Skip to main content
se añadieron 6 caracteres en el cuerpo
Origen Enlace
Black Sheep
  • 13.6k
  • 9
  • 38
  • 62

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>

Usando un poco de jquery y css puedes agregar cada x fila un elemento 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>

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>

Origen Enlace
Black Sheep
  • 13.6k
  • 9
  • 38
  • 62

Usando un poco de jquery y css puedes agregar cada x fila un elemento 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>