I am printing my page with jQuery. Now I want to print each table on new page e.g (Page 1-->Table 1,Page 2-->Table 2) with page break. but page break is not working.
My tables are as follows:
table 1
<table class="col-md-12">contents</table>
table 2
<table class="col-md-12">contents</table>
table 3
<table class="col-md-12">contents</table>
My Css
#media print {table {
page-break-after: always;
}
}
You can use some thing like this:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
</style>
</head>
<body>
<table>
<thead>
<tr><th>heading</th></tr>
</thead>
<tfoot>
<tr><td>notes</td></tr>
</tfoot>
<tbody>
<tr>
<td>x</td>
</tr>
<tr>
<td>x</td>
</tr>
<tr>
<td>x</td>
</tr>
</tbody>
</table>
</body>
</html>
Related
I want to print html table and repeat custom header on all of pages .
this is my example code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style>
#media print
{
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
td { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
}
</style>
</head>
<body>
<table border=1>
<thead>
<tr>
<td colspan=5>Header</td>
</tr>
<tr>
<td>id</td>
<td>name</td>
<td>family</td>
<td>age</td>
<td>address</td>
</tr>
</thead>
<tr>
<td>1</td>
<td>Mahdi</td>
<td>Hosseini</td>
<td>12</td>
<td>Tehran</td>
</tr>
<tr>
<td>2</td>
<td>Javad</td>
<td>Mohammadi</td>
<td>43</td>
<td>
Shiraz <br>
Shiraz <br>
Shiraz <br>
// Repeat line to take big cell
Shiraz <br>
Shiraz <br>
Shiraz <br>
Shiraz <br>
</td>
</tr>
</table>
</body>
</html>
Page 1 :
But page 2 result this problem !
table vertical lines writed on header cell .
How can fix this problem or maybe you have a another idea ?
in this code ,I set a style for border of thead element , but my problem is that the border doesn't display in the browser at all.
what should i do?,please help me.thank you.
thead {
border: 3px solid red;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TEST</title>
</head>
<body>
<table>
<thead>
<tr>
<th>EXAM</th>
<th>RATE</th>
</tr>
</thead>
<tbody>
<tr>
<td>MATH</td>
<td>17.50</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>TOTAL</td>
<td>17.50</td>
</tr>
</tfoot>
</table>
</body>
</html>
You cant actually add a border to the thead Element as that element exists but has no "physical representation" when beign rendered. thead and tbody are semantical only elements but you cant actually style them properly.
Id recommend moving the border to the tr childs of your thead and configure your tables border-collapse behaviour instead:
table {
border-collapse: collapse;
}
table thead tr th {
border: 3px solid red;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TEST</title>
</head>
<body>
<table>
<thead>
<tr>
<th>EXAM</th>
<th>RATE</th>
</tr>
</thead>
<tbody>
<tr>
<td>MATH</td>
<td>17.50</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>TOTAL</td>
<td>17.50</td>
</tr>
</tfoot>
</table>
</body>
</html>
Here is html code for table i am having disorentation problem in resulting table. Kindly help.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 80%;
background-color:#A6F7EE;
}
th {
height: 50px;
}
</style>
</head>
<body>
<table align="center">
<tr>
<th>State</th>
<th>Condition</th>
<th>Slab Low</th>
<th>Slab High</th>
<th>Rate(in Rs)</th>
</tr>
<tr>
<td rowspan="4">Andhra Pradesh (As per tariff order dated 23rd March 2015.)</td>
<td colspan="3">Consumption less than 50 Units</td> <td align="center"> 1</td> <td align="center">50</td> <td align="center">1.45</td
></tr>
<tr>
<td colspan="3" rowspan="2">Consumption between 1 & 100 Units <td> 1</td> <td>50</td> <td> 1.45</td>
</tr><tr>
<td>51</td> <td>100</td> <td>2.6</td>
</tr>
</body>
</html>
Resulting table is disoriented what can be done to make table's row of equal size.
Not sure I completely understand the question, but there were some problems with the closing tags in your code and one of the td rowspans, maybe that was why it wasn't rendering correctly. Try the following:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 80%;
background-color:#A6F7EE;
}
th {
height: 50px;
}
</style>
</head>
<body>
<table align="center">
<tr>
<th>State</th>
<th>Condition</th>
<th>Slab Low</th>
<th>Slab High</th>
<th>Rate(in Rs)</th>
</tr>
<tr>
<td rowspan="3">Andhra Pradesh (As per tariff order dated 23rd March 2015.)</td>
<td colspan="3">Consumption less than 50 Units</td><td>1</td><td>50</td><td>1.45</td>
</tr>
<tr>
<td colspan="3" rowspan="2">Consumption between 1 & 100 Units</td>
<td>1</td>
<td>50</td>
<td>1.45</td>
</tr>
<tr>
<td>51</td>
<td>100</td>
<td>2.6</td>
</tr>
</body>
</html>
If fixing the closing and opening tags doesn't work, then (following your screenshot) the HTML markup should be something like this (just change the values);
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
table,
td,
th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 80%;
background-color: #A6F7EE;
}
th {
height: 50px;
}
</style>
</head>
<body>
<table>
<tr>
<th>1a</th>
<th>1b</th>
<th>1c</th>
<th>1d</th>
<th>1e</th>
<th>1f</th>
</tr>
<tr>
<td rowspan="4">2a</td>
<td>2b</td>
<td>2c</td>
<td>2d</td>
<td>2e</td>
<td>2f</td>
</tr>
<tr>
<td rowspan="2">3a</td>
<td rowspan="2">3b</td>
<td>3c</td>
<td>3d</td>
<td>3e</td>
</tr>
<tr>
<td>4c</td>
<td>4d</td>
<td>4e</td>
</tr>
<tr>
<td>5b</td>
<td>5c</td>
<td>5d</td>
<td>5e</td>
<td>5f</td>
</tr>
</table>
</body>
</html>
Code :
<html>
<head>
<title>Hello World</title>
</head>
<body>
<table border=1>
<tr>
<td >Old</td>
<td>1</td>
</tr>
<tr>
<td>New</td>
<td>1</td>
</tr>
</table>
</body>
Is there any technique I can use to highlight the items that have changed ( in this case , 2nd row's 1st column) using CSS ? or do I have to resort to other things like JavaScript ?
Use classes like:
<html>
<head>
<style type="text/css">
.highlight{
background: fuchsia;
}
</style>
<title>Hello World</title>
</head>
<body>
<table border=1>
<tr class="highlight">
<td >Old</td>
<td>1</td>
</tr>
<tr>
<td>New</td>
<td>1</td>
</tr>
</table>
</body>
And if something changes you can add the class to the specific element:
$(element).addClass('highlight');
or with plain JavaScript:
element.class = 'highlight';
If you're asking how to highlight the second column of the second row specifically this will work:
table > tr:nth-child(2) > td:nth-child(2) {
background-color:#FFEEEE;
}
If you're asking how to highlight changed rows ANYWHERE, use a class.
Add this to the of your document or the stylesheet.
<style> .highlight { background-color:#FFEEEE; }
Add this to your TD's
class="highlight"
How can I write a stylesheet to make a particular div element be repeated at the top of every page of a print out?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
thead { display:table-header-group }
tfoot { display:table-footer-group }
</style>
</head>
<body>
<table>
<thead>
<tr><th>heading</th></tr>
</thead>
<tfoot>
<tr><td>notes</td></tr>
</tfoot>
<tr>
<td>x</td>
</tr>
<tr>
<td>x</td>
</tr>
<!-- 500 more rows -->
<tr>
<td>x</td>
</tr>
</tbody>
</table>
</body>
</html>
thank you
"i was wondering if there is any way to print a div in all of printing html pages". As I understand you need to google for master pages. If you want header for multiple pages you should use PHP to deliver it.