Table 4th row

Is there a way to add a page break after each 4th row?

A page break?

Are you talking about a print stylesheet or do you just want a bigger gap after the fourth row?

If you can clarify the question and offer some code for us to look at we’ll try our best to help :slight_smile:

If you are nt talking about a print stylesheet you could target the 4th row with nth-child but it would be difficult to make space and would only work in modern browsers (not ie8).


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
table {
    width:100%;
    border-collapse:collapse
}
td {
    border:1px solid #000
}
tbody tr:nth-child(4n+4) {
border-top:10px solid #000;
}
tbody tr:nth-child(4n+4) td {
background:red;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0">
    <tr>
        <th scope="col">testing</th>
        <th scope="col">testing</th>
    </tr>
    <tbody>
        <tr>
            <td>testing</td>
            <td>testing</td>
        </tr>
        <tr>
            <td>testing</td>
            <td>testing</td>
        </tr>
        <tr>
            <td>testing</td>
            <td>testing</td>
        </tr>
        <tr>
            <td>testing</td>
            <td>testing</td>
        </tr>
        <tr>
            <td>testing</td>
            <td>testing</td>
        </tr>
        <tr>
            <td>testing</td>
            <td>testing</td>
        </tr>
        <tr>
            <td>testing</td>
            <td>testing</td>
        </tr>
        <tr>
            <td>testing</td>
            <td>testing</td>
        </tr>
        <tr>
            <td>testing</td>
            <td>testing</td>
        </tr>
        <tr>
            <td>testing</td>
            <td>testing</td>
        </tr>
        <tr>
            <td>testing</td>
            <td>testing</td>
        </tr>
        <tr>
            <td>testing</td>
            <td>testing</td>
        </tr>
        <tr>
            <td>testing</td>
            <td>testing</td>
        </tr>
        <tr>
            <td>testing</td>
            <td>testing</td>
        </tr>
        <tr>
            <td>testing</td>
            <td>testing</td>
        </tr>
    </tbody>
</table>
</body>
</html>


or perhaps:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
table {
    width:100%;
    border-collapse:collapse
}
td {border:1px solid #000}
tbody tr:nth-child(4n+4) td:after {
display:block;
content:"  ";
background:#fff;
width:100%;
height:20px;
border-top:1px solid #000;
}
tbody tr:nth-child(4n+1) td {background:red;}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0">
    <tr>
        <th scope="col">testing</th>
        <th scope="col">testing</th>
    </tr>
    <tbody>
        <tr>
            <td>testing</td>
            <td>testing</td>
        </tr>
        <tr>
            <td>testing</td>
            <td>testing</td>
        </tr>
        <tr>
            <td>testing</td>
            <td>testing</td>
        </tr>
        <tr>
            <td>testing</td>
            <td>testing</td>
        </tr>
        <tr>
            <td>testing</td>
            <td>testing</td>
        </tr>
        <tr>
            <td>testing</td>
            <td>testing</td>
        </tr>
        <tr>
            <td>testing</td>
            <td>testing</td>
        </tr>
        <tr>
            <td>testing</td>
            <td>testing</td>
        </tr>
        <tr>
            <td>testing</td>
            <td>testing</td>
        </tr>
        <tr>
            <td>testing</td>
            <td>testing</td>
        </tr>
        <tr>
            <td>testing</td>
            <td>testing</td>
        </tr>
        <tr>
            <td>testing</td>
            <td>testing</td>
        </tr>
        <tr>
            <td>testing</td>
            <td>testing</td>
        </tr>
        <tr>
            <td>testing</td>
            <td>testing</td>
        </tr>
        <tr>
            <td>testing</td>
            <td>testing</td>
        </tr>
    </tbody>
</table>
</body>
</html>


it’s an application that generates a table with a row containing 2 cells.

it want to add a page break (printing) after the 4th row.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-ca" xml:lang="en-ca">
<head>
<title>Report</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script src="jquery-1.4.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#Report tr:nth-child(4)").css("page-break-after","always");
});
</script>
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<style type="text/css">
#Report tr:nth-child(4)
{
    page-break-after: always;
}
</style>
<![endif]-->
<style type="text/css">
#Report Report {
	width: 100%;
	border: none;
	border-spacing: 0;
	border-collapse: separate;
	margin: 0;
}
#Report {
	margin-top: 25px;
}
#Report td {
	padding: 5px 5px 48px 5px;
	/*padding: 0 0 27px 0; */
	vertical-align: top;
}
#Report td {
	font-family: "Courier New";
	font-size: 0.82em;
}
</style>
</head>
<body>
<h1>title</h1>
<table id="Report">
  <tr>
    <td> text<br />
      text<br />
      text<br />
      text<br />
      text<br />
      text<br />
      text <br />
      text <br />
      text </td>
    <td> text<br />
      text<br />
      text<br />
      text<br />
      text<br />
      text<br />
      text <br />
      text <br />
      text </td>
  </tr>
  <tr>
    <td> text<br />
      text<br />
      text<br />
      text<br />
      text<br />
      text<br />
      text <br />
      text <br />
      text </td>
    <td> text<br />
      text<br />
      text<br />
      text<br />
      text<br />
      text<br />
      text <br />
      text <br />
      text </td>
  </tr>
  <tr>
    <td> text<br />
      text<br />
      text<br />
      text<br />
      text<br />
      text<br />
      text <br />
      text <br />
      text </td>
    <td> text<br />
      text<br />
      text<br />
      text<br />
      text<br />
      text<br />
      text <br />
      text <br />
      text </td>
  </tr>
  <tr>
    <td> text<br />
      text<br />
      text<br />
      text<br />
      text<br />
      text<br />
      text <br />
      text <br />
      text </td>
    <td> text<br />
      text<br />
      text<br />
      text<br />
      text<br />
      text<br />
      text <br />
      text <br />
      text </td>
  </tr>
  <!-- page break -->
  <tr>
    <td> text<br />
      text<br />
      text<br />
      text<br />
      text<br />
      text<br />
      text <br />
      text <br />
      text </td>
    <td> text<br />
      text<br />
      text<br />
      text<br />
      text<br />
      text<br />
      text <br />
      text <br />
      text </td>
  </tr>
  <tr>
    <td> text<br />
      text<br />
      text<br />
      text<br />
      text<br />
      text<br />
      text <br />
      text <br />
      text </td>
    <td> text<br />
      text<br />
      text<br />
      text<br />
      text<br />
      text<br />
      text <br />
      text <br />
      text </td>
  </tr>
  <tr>
    <td> text<br />
      text<br />
      text<br />
      text<br />
      text<br />
      text<br />
      text <br />
      text <br />
      text </td>
    <td> text<br />
      text<br />
      text<br />
      text<br />
      text<br />
      text<br />
      text <br />
      text <br />
      text </td>
  </tr>
  <tr>
    <td> text<br />
      text<br />
      text<br />
      text<br />
      text<br />
      text<br />
      text <br />
      text <br />
      text </td>
    <td> text<br />
      text<br />
      text<br />
      text<br />
      text<br />
      text<br />
      text <br />
      text <br />
      text </td>
  </tr>
  <!-- page break -->
</table>
</body>
</html>

Just put this in the print stylesheet.


#Report tr:nth-child(4n+4) {
 page-break-after: always;
}


You seem to have included a similar (but incorrect) rule just for IE less than 9!

We use IE7 at work and I’ll have to rely on Jquery to make it work and hopefully no one disables their javascript.