I have a table with several columns and 1000 rows. When I print the page, it breaks the rows onto different pages, showing the remaining rows on subsequent pages. I want to display the complete record in one go.
Below is a sample code with only one row inserted. However, when we have 1000 rows, it creates issues:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
@media screen
{
.divTable
{
border:1px solid;
display: table;
width:98%;
border-spacing:0px;/*cellspacing:poor IE support for this*/
}
.divRow
{
display:table-row;
width:auto;
}
.divCell
{
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
margin-top:0px;
float:left;/*fix for buggy browsers*/
display:table-column;
}
}
@media print
{
@page
{
size: 8.5in 11.5in;
size: potraite;
}
.divTable
{
page-break-after:auto;
border:1px solid;
display: table;
width:99%;
border-spacing:0px;/*cellspacing:poor IE support for this*/
}
.divRow
{
display:table-row;
width:auto;
}
.divCell
{
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
margin-top:0px;
float:left;
display:table-column;
}
}
</style>
</head>
<body style="margin:0 0 0 0">
<div class="divTable">
<div class="headRow">
<div class="divCell" style="width:10%">
SNo
</div>
<div class="divCell" style="width:10%">
RNo
</div>
<div class="divCell" style="width:10%">
Full Name
</div>
<div class="divCell" style="width:10%">
Father Name
</div>
<div class="divCell" style="width:20%">
Address
</div>
<div class="divCell" style="width:10%">
Class
</div>
<div class="divCell" style="width:10%">
Section
</div>
<div class="divCell" style="width:10%">
Teacher Name
</div>
<div class="divCell" style="width:10%">
Attendence%
</div>
</div>
</div>
<div class="divTable">
<div class="headRow">
<div class="divCell" style="width:10%">
1
</div>
<div class="divCell" style="width:10%">
RNo2013-0001
</div>
<div class="divCell" style="width:10%">
Abc
</div>
<div class="divCell" style="width:10%">
Xyz
</div>
<div class="divCell" style="width:20%">
Address
</div>
<div class="divCell" style="width:10%">
Class
</div>
<div class="divCell" style="width:10%">
Section
</div>
<div class="divCell" style="width:10%">
Teacher Name
</div>
<div class="divCell" style="width:10%">
90%
</div>
</div>
</div>
</body>
</html>
Please provide me with a CSS-based solution to manage this issue. I need to address it solely with CSS.