i want to print html page with modern browser and add header on every page on printing. Techniques found on the internet but does not work in modern browsers.
Is there a way to do this?
i add example that not work me in modern browser.
$(document).ready(function(){
var head = $('table thead tr');
$( "tbody tr:nth-child(10n+10)" ).after(head.clone());
});
table{
border:none;
}
tr{
display:block;
}
td, th{
width: 100px;
}
tbody tr.head {
page-break-before: always;
page-break-inside: avoid;
}
#media screen {
tbody .head{
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<thead>
<tr class="head">
<th>Month</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr class="start">
<td>January</td>
<td>2010</td>
</tr>
<tr>
<td>February</td>
<td>2010</td>
</tr>
<tr>
<td>March</td>
<td>2010</td>
</tr>
<tr>
<td>April</td>
<td>2010</td>
</tr>
<tr>
<td>May</td>
<td>2010</td>
</tr>
<tr>
<td>June</td>
<td>2010</td>
</tr>
<tr>
<td>July</td>
<td>2010</td>
</tr>
<tr>
<td>August</td>
<td>2010</td>
</tr>
<tr>
<td>September</td>
<td>2010</td>
</tr>
<tr>
<td>October</td>
<td>2010</td>
</tr>
<tr>
<td>November</td>
<td>2010</td>
</tr>
<tr class="end">
<td>December</td>
<td>2010</td>
</tr>
</tbody>
</table>
</body>
Try this sample
Use media query for custom style for screen and print
CSS
#media screen {
.page-header { display: none; }
.page-footer { display: none; }
}
HTML code
<body>
<p class="page-header">Page header goes here</p>
your Webpage main content goes here
<p class="page-footer">Page footer goes here</p>
</body>
Related
Avoid Table row break in html
enter image description here
As shown in above image the table td is breaking.
Is it possible to avoid the page break?
#media print {
body { margin : 0px 15px !important }
#page {page-break-before: always; page-break-after: always;}
.keyterms{page-break-before: always;}
.printBtn{ display: none;}
table { page-break-inside:auto; }
tr { page-break-inside:auto; }
}
<div class="row pt-4 pb-4">
<table class="table table-bordered">
<tbody>
<tr>
<td>Date</td>
<td>Start Time</td>
<td>End Time</td>
<td>Time Zone</td>
<td>Type</td>
<td>Description</td>
</tr>
<tr>
<td>12/12/2022</td>
<td>12:00 pm</td>
<td>13:00 pm</td>
<td>USA</td>
<td>XYZ</td>
<td>na</td>
</tr>
</tbody>
</table>
</div>
I have created a collapsible HTML nested table.
But i am not able to set the proper width after so many futile efforts.
My child table is not fitting to my parent table's head.
Here is the code snippet:
https://jsfiddle.net/preetigupta617/bpLkdx13/
Code:
HTML
<head>
<script>
$('.content').css('display','none');
$( ".collapsible" ).click(function() {
id = $(this).attr('id');
num = id.split("_").pop();
// document.getElementById("mytable_"+num).classList.toggle("show");
if(document.getElementById("mytable_"+num).style.display=='none') {
document.getElementById("mytable_"+num).style.display= 'block';
}
else {
document.getElementById("mytable_"+num).style.display= 'none'
}
console.log(num);
console.log(document.getElementById("mytable_"+num).innerHTML);
</script>
<style>
table {border-collapse:collapse; table-layout:fixed; width:310px;}
table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}
/* Style the button that is used to open and close the collapsible content */
.collapsible {
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
background-color: #ccc;
}
/* Style the collapsible content. Note: hidden by default */
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
</style>
</head>
<body>
<table style='width:80%;margin:0 auto;' border='1' bordercolor='BLACK'>
<thead >
<tr class='w3-cyan'><th>S.no</th><th>Command</th><th>Failure Reasons</th><th>Testcase Affected</th><th>Response</th></tr></thead>
<tr id='myBtn_1' class='collapsible'><td>1</td><td colspan=4>build_model</td></tr>
<tr >
<td colspan=1></td><td colspan=1></td>
<td id='mytable_1' class='content' colspan=3><table>
<tr><td>MACHINE_ERROR,OTHER_INFO,WARNINGS,PATTERN_VAR</td><td><a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/build_model-MACHINE_ERROR-OTHER_INFO-WARNINGS-PATTERN_VAR'>1</a></td><td> Regold</td></tr>
</table></td></tr>
<tr id='myBtn_2' class='collapsible'><td>2</td><td colspan=4>build_testmode</td></tr>
<tr >
<td colspan=1></td><td colspan=1></td>
<td id='mytable_2' class='content' colspan=3><table>
<tr><td>OTHER_INFO,COVERAGE_VAR</td><td><a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/build_testmode-OTHER_INFO-COVERAGE_VAR'>1</a></td><td> Open CCR</td></tr>
<tr><td>CORE,TESTCASE_ERRORS,CRITICAL_ERRORS,MACHINE_ERROR,PATTERN_VAR,COVERAGE_VAR</td><td><a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/build_testmode-CORE-TESTCASE_ERRORS-CRITICAL_ERRORS-MACHINE_ERROR-PATTERN_VAR-COVERAGE_VAR'>1</a></td><td> Fix Testcase</td></tr>
</table></td></tr>
<tr id='myBtn_3' class='collapsible'><td>3</td><td colspan=4>commit_tests</td></tr>
<tr >
<td colspan=1></td><td colspan=1></td>
<td id='mytable_3' class='content' colspan=3><table>
<tr><td>MACHINE_ERROR,WARNINGS</td><td><a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/commit_tests-MACHINE_ERROR-WARNINGS'>1</a></td><td> Rerun</td></tr>
</table></td></tr>
<tr id='myBtn_4' class='collapsible'><td>4</td><td colspan=4>create_logic_tests</td></tr>
<tr >
<td colspan=1></td><td colspan=1></td>
<td id='mytable_4' class='content' colspan=3><table>
<tr><td>CORE,OTHER_INFO,COVERAGE_VAR</td><td><a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/create_logic_tests-CORE-OTHER_INFO-COVERAGE_VAR'>1</a></td><td> Regold</td></tr>
<tr><td>CORE,CRITICAL_ERRORS,MACHINE_ERROR,OTHER_INFO,WARNINGS,SEVERE,PATTERN_VAR,COVERAGE_VAR</td><td><a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/create_logic_tests-CORE-CRITICAL_ERRORS-MACHINE_ERROR-OTHER_INFO-WARNINGS-SEVERE-PATTERN_VAR-COVERAGE_VAR'>1</a></td><td> Rerun</td></tr>
</table></td></tr>
<tr id='myBtn_5' class='collapsible'><td>5</td><td colspan=4>diagnose_failures</td></tr>
<tr >
<td colspan=1></td><td colspan=1></td>
<td id='mytable_5' class='content' colspan=3><table>
<tr><td>TESTCASE_ERRORS,CRITICAL_ERRORS,PATTERN_VAR,COVERAGE_VAR</td><td><a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/diagnose_failures-TESTCASE_ERRORS-CRITICAL_ERRORS-PATTERN_VAR-COVERAGE_VAR'>1</a></td><td> Rerun</td></tr>
</table></td></tr>
<tr id='myBtn_6' class='collapsible'><td>6</td><td colspan=4>verify_test_structures</td></tr>
<tr >
<td colspan=1></td><td colspan=1></td>
<td id='mytable_6' class='content' colspan=3><table>
<tr><td>TESTCASE_ERRORS,MACHINE_ERROR,OTHER_INFO,WARNINGS,SEVERE,COVERAGE_VAR</td><td><a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/verify_test_structures-TESTCASE_ERRORS-MACHINE_ERROR-OTHER_INFO-WARNINGS-SEVERE-COVERAGE_VAR'>1</a></td><td> Open CCR</td></tr>
</table></td></tr>
<tr id='myBtn_7' class='collapsible'><td>7</td><td colspan=4>write_toggle_gram</td></tr>
<tr >
<td colspan=1></td><td colspan=1></td>
<td id='mytable_7' class='content' colspan=3><table>
<tr><td>CORE</td><td><a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/write_toggle_gram-CORE'>1</a></td><td> Fix Testcase</td></tr>
</table></td></tr>
</table>
</body>
PS:You can also use the jsfiddle link i have given in post too.
The foldable HTML table is working in actual but not in jsfiddle site.
But i want help only in case of css,i.e i want to set the child table in last 3 columns properly.How can i achieve that?
I tried , but end up only scratching my head .
Thanks in advance !!
[Output with this current code]1
Here you are:
$(".collapsible").click(function() {
$(this).next('tr').toggle();
});
table {
border-collapse: collapse;
table-layout: fixed;
width: 80%;
margin: 0 auto;
}
th {
border: solid 1px;
}
table td {
border: solid 1px #fab;
width: 100px;
word-wrap: break-word;
}
table table {
width: 100%;
}
/* Style the button that is used to open and close the collapsible content */
.collapsible {
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.collapsible+tr:not(:nth-child(2)) {
display: none
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.collapsible:hover {
background-color: #ccc;
}
/* Style the collapsible content. Note: hidden by default */
.content {
padding: 0;
overflow: hidden;
background-color: #f1f1f1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="w3-card w3-round w3-pink">
<h1>
<center>Regression Results</center>
</h1>
</div>
<table>
<thead>
<tr class="w3-cyan">
<th>S.no</th>
<th>Command</th>
<th>Failure Reasons</th>
<th>Testcase Affected</th>
<th>Response</th>
</tr>
</thead>
<tbody>
<tr class="collapsible">
<td>1</td>
<td colspan="4">build_model</td>
</tr>
<tr>
<td></td>
<td></td>
<td class="content" colspan="3">
<table>
<tbody>
<tr>
<td>MACHINE_ERROR,OTHER_INFO,WARNINGS,PATTERN_VAR</td>
<td>1</td>
<td> Regold</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="collapsible">
<td>2</td>
<td colspan="4">build_testmode</td>
</tr>
<tr>
<td></td>
<td></td>
<td class="content" colspan="3">
<table>
<tbody>
<tr>
<td>OTHER_INFO,COVERAGE_VAR</td>
<td>1</td>
<td> Open CCR</td>
</tr>
<tr>
<td>CORE,TESTCASE_ERRORS,CRITICAL_ERRORS,MACHINE_ERROR,PATTERN_VAR,COVERAGE_VAR</td>
<td>1</td>
<td> Fix Testcase</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="collapsible">
<td>3</td>
<td colspan="4">commit_tests</td>
</tr>
<tr>
<td></td>
<td></td>
<td class="content" colspan="3">
<table>
<tbody>
<tr>
<td>MACHINE_ERROR,WARNINGS</td>
<td>1</td>
<td> Rerun</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="collapsible">
<td>4</td>
<td colspan="4">create_logic_tests</td>
</tr>
<tr>
<td></td>
<td></td>
<td class="content" colspan="3">
<table>
<tbody>
<tr>
<td>CORE,OTHER_INFO,COVERAGE_VAR</td>
<td>1</td>
<td> Regold</td>
</tr>
<tr>
<td>CORE,CRITICAL_ERRORS,MACHINE_ERROR,OTHER_INFO,WARNINGS,SEVERE,PATTERN_VAR,COVERAGE_VAR</td>
<td>1</td>
<td> Rerun</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="collapsible">
<td>5</td>
<td colspan="4">diagnose_failures</td>
</tr>
<tr>
<td></td>
<td></td>
<td class="content" colspan="3">
<table>
<tbody>
<tr>
<td>TESTCASE_ERRORS,CRITICAL_ERRORS,PATTERN_VAR,COVERAGE_VAR</td>
<td>1</td>
<td> Rerun</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="collapsible">
<td>6</td>
<td colspan="4">verify_test_structures</td>
</tr>
<tr>
<td></td>
<td></td>
<td class="content" colspan="3">
<table>
<tbody>
<tr>
<td>TESTCASE_ERRORS,MACHINE_ERROR,OTHER_INFO,WARNINGS,SEVERE,COVERAGE_VAR</td>
<td>1</td>
<td> Open CCR</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="collapsible">
<td>7</td>
<td colspan="4">write_toggle_gram</td>
</tr>
<tr>
<td></td>
<td></td>
<td class="content" colspan="3">
<table>
<tbody>
<tr>
<td>CORE</td>
<td>1</td>
<td> Fix Testcase</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
https://jsfiddle.net/g4Lo92zb/
I changed your HTML and JS.
You can collapse a row that uses less code, and makes it look neater.
Be sure when you set the display style property on your element, to set it to the valid display property value.
table display: table;
tr display: table-row;
td display: table-cell;
I have a basic table and would like to show the first 3 rows under the header, then provide a scroll wheel to display the remaining 2 rows.
I have tried setting the height of the table and using overflow: scroll in various places but cannot get to work. I wasn't sure if this property could even be used on tables or if it was just for divs.
My code is below, many thanks in advance for any help.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 15px 100px;
}
</style>
<table>
<thead>
<tr>
<th>Name</th>
<th>DOB</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>26.01.1989</td>
<td>john#email.com</td>
</tr>
<tr>
<td>Rick Thompson</td>
<td>15.04.1995</td>
<td>rick#email.com</td>
</tr>
<tr>
<td>Tim Bloggs</td>
<td>03.02.2000</td>
<td>tim#email.com</td>
</tr>
<tr>
<td>Bob Roberton</td>
<td>11.04.1985</td>
<td>bob#email.com</td>
</tr>
<tr>
<td>Joe Bishop</td>
<td>03.02.2010</td>
<td>joe#email.com</td>
</tr>
</tbody>
</table>
</body>
You have to put the table inside a div and then set the height of the div to be smaller than the height of your table and overflow-y: scroll.
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 15px 100px;
}
.table-wrap {
height: 222px;
overflow-y: scroll;
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>Name</th>
<th>DOB</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>26.01.1989</td>
<td>john#email.com</td>
</tr>
<tr>
<td>Rick Thompson</td>
<td>15.04.1995</td>
<td>rick#email.com</td>
</tr>
<tr>
<td>Tim Bloggs</td>
<td>03.02.2000</td>
<td>tim#email.com</td>
</tr>
<tr>
<td>Bob Roberton</td>
<td>11.04.1985</td>
<td>bob#email.com</td>
</tr>
<tr>
<td>Joe Bishop</td>
<td>03.02.2010</td>
<td>joe#email.com</td>
</tr>
</tbody>
</table>
</div>
</body>
table {
border-collapse: collapse;
max-height: 50px;
overflow: auto;
}
th, td {
border: 1px solid black;
padding: 15px 100px;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>DOB</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>26.01.1989</td>
<td>john#email.com</td>
</tr>
<tr>
<td>Rick Thompson</td>
<td>15.04.1995</td>
<td>rick#email.com</td>
</tr>
<tr>
<td>Tim Bloggs</td>
<td>03.02.2000</td>
<td>tim#email.com</td>
</tr>
<tr>
<td>Bob Roberton</td>
<td>11.04.1985</td>
<td>bob#email.com</td>
</tr>
<tr>
<td>Joe Bishop</td>
<td>03.02.2010</td>
<td>joe#email.com</td>
</tr>
</tbody>
</table>
I'm trying to figure out how to keep the table head visible when scrolling. Is there a setting in semantic ui for this? Or will I just have to use a non-semantic ui solution?
You'll need to view "Full page" to see the table correctly.
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.0/semantic.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.0/semantic.css" rel="stylesheet" />
<div style="height:200px;overflow:auto">
<table class="ui small celled striped table" sytle="width:100%">
<thead>
<tr>
<th>Date</th>
<th>Status</th>
<th>Facility Name</th>
<th>Phone</th>
</tr>
</thead>
<tbody data-bind="foreach:FollowupEntries">
<tr>
<td>Date</td>
<td>Status</td>
<td>Facility Name</td>
<td>Phone</td>
</tr>
<tr>
<td>Date</td>
<td>Status</td>
<td>Facility Name</td>
<td>Phone</td>
</tr>
<tr>
<td>Date</td>
<td>Status</td>
<td>Facility Name</td>
<td>Phone</td>
</tr>
<tr>
<td>Date</td>
<td>Status</td>
<td>Facility Name</td>
<td>Phone</td>
</tr>
<tr>
<td>Date</td>
<td>Status</td>
<td>Facility Name</td>
<td>Phone</td>
</tr>
<tr>
<td>Date</td>
<td>Status</td>
<td>Facility Name</td>
<td>Phone</td>
</tr>
<tr>
<td>Date</td>
<td>Status</td>
<td>Facility Name</td>
<td>Phone</td>
</tr>
<tr>
<td>Date</td>
<td>Status</td>
<td>Facility Name</td>
<td>Phone</td>
</tr>
</tbody>
</table>
</div>
I solved the problem with position: sticky, like this:
.ui.table thead tr:first-child > th {
position: sticky !important;
top: 0;
z-index: 2;
}
As #Stewartside suggested, this isn't current built into Semantic UI, but it has been discussed.
Though I don't recommend it if you really really want it to work even with hacks this should work for you:
<table class="semantic's class" style="margin-bottom:0px;border-bottom:none">
<thead>...</thead>
</table>
<table class="semantic's class" style="margin-top:0px; border-top: none">
<div style="overflow-y:scroll; height: YOUR-REQUIRED-HEIGHT">
<thead style="visible:hidden">...</thead>
<tbody>...</tbody>
</div>
</table>
This script will probably do the job for you. Just add the class "sticky" to your table tag and adjust the offset from the top:
$(document).ready(function(){
var tableTop = $('.sticky.table').offset().top;
$('.sticky.table').children('thead').children('tr').children('th').each( function() {
$(this).css({ width: $(this).outerWidth() });
});
$(window).scroll(function() {
var fromTop = $(window).scrollTop();
if($('.sticky.table').length > 0){
stickyTableHead(fromTop);
}
});
function stickyTableHead(fromTop){
if(fromTop > tableTop ){
$('.sticky.table').children('thead').css({'position': 'fixed', top: 0 });
}else{
$('.sticky.table').children('thead').css({'position': 'relative', top: 0});
}
};
});
Applying Ashkan's solution to any table.
table{
width:100%;
}
table,th,td{
border: 1px solid grey;
border-collapse: collapse;
}
thead {
background-color: grey;
position: sticky !important;
top: 0;
z-index: 2;
}
<div style="overflow: auto; height:100px;">
<table>
<thead>
<tr>
<th>ID</th>
<th>ONE</th>
<th>TWO</th>
<th>THREE</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>A</td><td>B</td><td>C</td>
</tr>
<tr>
<td>2</td><td>D</td><td>E</td><td>F</td>
</tr>
<tr>
<td>3</td><td>G</td><td>H</td><td>I</td>
</tr>
<tr>
<td>4</td><td>J</td><td>K</td><td>L</td>
</tr>
<tr>
<td>5</td><td>M</td><td>N</td><td>O</td>
</tr>
<tr>
<td>6</td><td>P</td><td>Q</td><td>R</td>
</tr>
<tr>
<td>7</td><td>S</td><td>T</td><td>U</td>
</tr>
<tr>
<td>8</td><td>V</td><td>W</td><td>X</td>
</tr>
<tr>
<td>9</td><td>Y</td><td>Z</td><td>0</td>
</tr>
</tbody>
</table>
</div>
Check out this JSFiddle, I think it is the kind of thing you're looking for.. specifically check out the CSS for the thead tag.
thead {
position: fixed;
top: 0;
left: 0;
background-color: white;
}
I want to hide the border for a specific rows of a table.How to do it?
Any Idea?
Sample code is Highly Appreciated.
Use the CSS property border on the <td>s following the <tr>s you do not want to have the border.
In my example I made a class noBorder that I gave to one <tr>. Then I use a simple selector tr.noBorder td to make the border go away for all the <td>s that are inside of <tr>s with the noBorder class by assigning border: 0.
Note that you do not need to provide the unit (i.e. px) if you set something to 0 as it does not matter anyway. Zero is just zero.
table, tr, td {
border: 3px solid red;
}
tr.noBorder td {
border: 0;
}
<table>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
</tr>
<tr class="noBorder">
<td>A2</td>
<td>B2</td>
<td>C2</td>
</tr>
<tr>
<td>A3</td>
<td>A3</td>
<td>A3</td>
</tr>
</table>
Here's the output as an image:
I use this with good results:
border-style:hidden;
It also works for:
border-right-style:hidden; /*if you want to hide just a border on a cell*/
Example:
<style type="text/css">
table, th, td {
border: 2px solid green;
}
tr.hide_right > td, td.hide_right{
border-right-style:hidden;
}
tr.hide_all > td, td.hide_all{
border-style:hidden;
}
}
</style>
<table>
<tr>
<td class="hide_right">11</td>
<td>12</td>
<td class="hide_all">13</td>
</tr>
<tr class="hide_right">
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr class="hide_all">
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>
Here is the result:
Add programatically noborder class to specific row to hide it
<style>
.noborder
{
border:none;
}
</style>
<table>
<tr>
<th>heading1</th>
<th>heading2</th>
</tr>
<tr>
<td>content1</td>
<td>content2</td>
</tr>
/*no border for this row */
<tr class="noborder">
<td>content1</td>
<td>content2</td>
</tr>
</table>
You can simply add these lines of codes here to hide a row,
Either you can write border:0 or border-style:hidden; border: none or it will happen the same thing
<style type="text/css">
table, th, td {
border: 1px solid;
}
tr.hide_all > td, td.hide_all{
border: 0;
}
}
</style>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr class= hide_all>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
running these lines of codes can solve the problem easily