Put blank space every 20 rows in an html table

Navigation
4

Is there any way to put a blank space in a table every X rows?

I do not care if it's with css, with jquery or whatever.

This is what the page generates, and the space I want to put in the red box.

Pages are created as needed and created with a <page> </page> .

Within the article space there are two tables, and the articles are grouped by a <tbody> to group what would be the article (article of 20 lines) and the description (Disc ssd chachi that you load).

I would not mind if I have to replace the table with something else to do it.

    
asked by Killpe 29.12.2016 в 22:00
source

3 answers

8

You can use the selector nth-child(20n) to apply a style to the rows that are 20 or a multiple of 20. In this case, I understand that by blank space you mean leaving a margin with respect to the rest of the rows.

However, as @MarcosGallardo said, in my original response I modified the display: table-row of the rows since I assigned them display: block to be able to modify the margin of the rows since these, by default, can not have margin.

In order not to modify the style of the tr and it seems that there is a margin for the top and bottom of the row 20 or multiple of 20 what can be done is to assign a height to the writing line by means of the property line-height .

Subsequently, we can set the white background for that particular row so that there seems to be a margin at the top and bottom of the row.

Example: 

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>
    
answered by 29.12.2016 в 22:09
3

Using a bit of jquery and css you can add each x row a empty element that separates the table to the height you want.

To simplify the code there is a separation every 5th row: 

$('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>
    
answered by 30.12.2016 в 16:36
2

You can group n rows using <tbody> .

  

A <table> can have zero or more elements <tbody> .

Example: 

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>
    
answered by 29.12.2016 в 22:44
Add time in PHP array Playing with JavaScript String