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 ?
Related
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>
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>
I have two independent tables. How to manage when I mouse over one of the cell on Table 1 then cells which have the same values on Table 2 turn highlighted? I prefer to use html/css coding, not JQuery?
I worked on code below but no success.
<HTML>
<STYLE type=text/css>
tr:hover td.highlight776{ background-color:red; }
tr:hover td.highlight970{ background-color:blue; }
tr:hover td.highlight1024{ background-color:magenta; }
tr:hover td.highlight1197{ background-color:yellow; }
tr:hover td.highlight1200{ background-color:orange; }
tr:hover td.highlight1015{ background-color:orange; }
</STYLE>
<HEAD>
<TITLE></TITLE>
<META name="description" content="">
<META name="keywords" content="">
<META name="generator" content="CuteHTML">
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#800080">
<br><br>
Table 1
<Table border=1>
<tr>
<td class="highlight776">Proje 776</td>
</tr>
<tr>
<td class="highlight1015">Proje 1015</td>
</tr>
<tr>
<td class="highlight970">Proje 970</td>
</tr>
<tr>
<td class="highlight1024">Proje 1024</td>
</tr>
<tr>
<td class="highlight1197">Proje 1197</td>
<tr>
<td class="highlight1200">Proje 1200</td>
</tr>
</Table>
<br><br><br>
Table 2
<Table class="tahsis" border=1>
<tr>
<td class="highlight776">776</td>
<td class="highlight1015">1015</td>
<td class="highlight776">776</td>
<td class="highlight970">970</td>
<td class="highlight1024">1024</td>
<td class="highlight970">970</td>
</tr>
<tr>
<td>970</td>
<td>776</td>
<td>776</td>
<td>776</td>
<td>1015</td>
<td>1015</td>
<tr>
<td>1015</td>
<td>776</td>
<td>970</td>
<td>970</td>
<td>1024</td>
<td>970</td>
</tr>
</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>
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.