HTML page id not printed same as being displayed - html

i have a html page which has a table and whose header is not same when printed as is displayed
the green div tag and table footer text is just printed with no background
please help me
my code is
<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">
.cnt
{
padding-top:10px;
padding-bottom:10px;
}
</style>
</head>
<body>
<div style="width:21cm; margin-left:auto; margin-right:auto; padding-top:0px; position:relative;">
<div style="width:90%; margin-left:auto; margin-right:auto;">
<div style="color:#FFF; background-color:green; padding:5px; font:20px bolder Verdana, Geneva, sans-serif; text-align:center;">
Receipt Details
</div>
<div>
<table border="1" cellspacing="2" cellpadding="2" width="100%">
<tbody><tr bgcolor="#000" style="color:#FFF; text-align:center;">
<td>
Receipt No.
</td>
<td>
Date
</td>
<td>
Amount Paid
</td>
<td>
Amount Due
</td>
<td>
Remark
</td>
</tr>
<tr style="text-align:center;">
<td>
</td>
<td>
</td>
<td>
500/-
</td>
<td>
</td>
<td>
Registration
</td>
</tr>
<tr style="text-align:center;">
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
Fee Payment
</td>
</tr>
<tr style="text-align:center;">
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
Fee Payment
</td>
</tr>
<tr style="text-align:center;">
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
Fee Payment
</td>
</tr>
</tbody></table>
</div>
</div>
</div>
</body></html>


<link href="/automin/90617406afeb35403b4c010c2cdd4071.css" type="text/css" title="default" rel="stylesheet" media="screen, projection, print">
Make sure your stylesheet is set to the print media.
Also, when you print, make sure "Print background colors is checked"

Related

how can i merge the two rows 'Ninja ' in one row with the same name 'Ninja'?

how can i merge the two rows 'Ninja ' in one row with the same name 'Ninja' ?
i used the rowspan in the first Ninja and it doesn't work why ? i want to make the table looks good
here is my code :
<body>
<Table style="width:100%" border="2" > <caption>Member's Data</caption>
<thead>
<tr>
<th>Groupe </th>
<th>Avatar</th>
<th>Name</th>
<th>Email</th>
<th>Character</th>
<th>profile</th>
</tr>
</thead>
<tbody>
<tr>
<td> Ninja </td>
<td>
<img src="https://icons.iconarchive.com/icons/apathae/satellite/256/2-Pictures-icon.png" alt="" height="40px" width="40px">
</td>
<td> Osama <br> Mohamed</td>
<td>
o1#nn.sa <br> <hr> o2#nn.sa
</td>
<td> © </td>
<td> profile</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Ninja</td>
<td>
<img src="https://icons.iconarchive.com/icons/treetog/i/256/Pictures-icon.png" alt="" height="40px" width="40px">
</td>
<td>Shady <br>Nabil </td>
<td>s#nn.sa </td>
<td> ™ </td>
<td> profile </td>
</tr>
</tbody>
<tbody>
<tr>
<td>Monsters</td>
<td>
<img src="https://icons.iconarchive.com/icons/itzikgur/my-seven/256/Pictures-Canon-icon.png" alt="" height="40px" width="40px">
</td>
<td>Mohamed <br> Ibrahim</td>
<td> m#nn.sa </td>
<td> ® </td>
<td> profile</td>
</tr>
</tbody>
thank you for your answers

You can use the rowspan attribute to make cells merge with other cells. to make it work, you have to remove the <thbody>. the code will be like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<Table style="width:100%" border="2" > <caption>Member's Data</caption>
<thead>
<tr>
<th>Groupe </th>
<th>Avatar</th>
<th>Name</th>
<th>Email</th>
<th>Character</th>
<th>profile</th>
</tr>
</thead>
<tr>
<td rowspan="2"> Ninja </td>
<td>
<img src="https://icons.iconarchive.com/icons/apathae/satellite/256/2-Pictures-icon.png" alt="" height="40px" width="40px">
</td>
<td> Osama <br> Mohamed</td>
<td>
o1#nn.sa <br> <hr> o2#nn.sa
</td>
<td> © </td>
<td> profile</td>
</tr>
<tr>
<td>
<img src="https://icons.iconarchive.com/icons/treetog/i/256/Pictures-icon.png" alt="" height="40px" width="40px">
</td>
<td>Shady <br>Nabil </td>
<td>s#nn.sa </td>
<td> ™ </td>
<td> profile </td>
</tr>
<tr>
<td>Monsters</td>
<td>
<img src="https://icons.iconarchive.com/icons/itzikgur/my-seven/256/Pictures-Canon-icon.png" alt="" height="40px" width="40px">
</td>
<td>Mohamed <br> Ibrahim</td>
<td> m#nn.sa </td>
<td> ® </td>
<td> profile</td>
</tr>
</body>
</html>
and for the output like this :

Bootstrap 3 col-xs not working as expected

I'm using Bootstrap 3 for a fairly simple table, I need to display 4 columns side by side even on phones, something like this:
<div class="container">
<div class="row" >
<div class="col-xs-5" >
<p style="margin-top: 25%;">A Day in the life of Dror</p>
</div>
<div class="col-xs-1">6:30 am<br />7:30 am<br />8:00 am<br />13:00 am<br />16:00 am<br />17:00 am<br />18:00 am<br />20:00 am<br />22:00 am<br />23:00 am</div>
<div class="col-xs-1">sample img</div>
<div class="col-xs-5 ">WAKE UP <br />MEETING / BREAKFAST <br />FIRST LESSON / TFILA <br />LUNCH BREAK <br />END OF SCHOOL <br />HOMEWORK TIME<br />DINNER <br />EXTRA CURRICULUM ACTIVITIES<br />ALL RETURN TO BUILDING <br />LIGHT'S OUT</div>
</div>
</div>
but on phones it still displays stacked.

Well the code works fine, you must be facing an issue due the padding on smaller phones, maybe you can set the padding to 0px or to any other value less than the default which is 15px for both the left and right side, we need to do this for all the columns under the row.
.remove-padding > div{
padding:0px;
}
So I add the class remove-padding to the remove the padding for all the children of the first level of row (i.e the columns under the row). Please let me know if this fixes your issue.
JSFiddle Demo

.table {
border-bottom:0px !important;
}
.table th, .table td {
border: 1px !important;
}
.fixed-table-container {
border:0px !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="margin-top:50px";>
<div class="container">
<table class="table">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td>6:30 am</td>
<td>sample img</td>
<td>WAKE UP</td>
</tr>
<tr>
<td> </td>
<td>7:30 am</td>
<td> </td>
<td>MEETING / BREAKFAST</td>
</tr>
<tr>
<td> </td>
<td>8:00 am</td>
<td> </td>
<td>FIRST LESSON / TFILA </td>
</tr>
<tr>
<td> </td>
<td>13:00 am</td>
<td> </td>
<td>LUNCH BREAK</td>
</tr>
<tr>
<td> A Day in the life of Dror </td>
<td>16:00 am</td>
<td> </td>
<td>END OF SCHOOL</td>
</tr>
<tr>
<td> </td>
<td>17:00 am</td>
<td> </td>
<td>HOMEWORK TIME</td>
</tr>
<tr>
<td> </td>
<td>18:00 am</td>
<td> </td>
<td>DINNER</td>
</tr>
<tr>
<td> </td>
<td>20:00 am</td>
<td> </td>
<td>EXTRA CURRICULUM ACTIVITIES</td>
</tr>
<tr>
<td> </td>
<td>23:00 am</td>
<td> </td>
<td>ALL RETURN TO BUILDING</td>
</tr>
<tr>
<td> </td>
<td>24:00 am</td>
<td> </td>
<td>LIGHT'S OUT</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

background color of table cells using css and html

I've coded a table I want it to be like this : even and odd rows have different colors and first row and column have the same color ;
I used colgroup for coloring first column but it doesn't work.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
tr.odd{background-color:#f9f;}
tr.even{background-color:#fcf;}
</style>
</head>
<body>
<table width="200" border="1">
<colgroup span="1" style="background:purple;"></colgroup>
<tr style="background:purple;">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="odd">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="even">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="odd">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>

Maybe this is what you wanted.
CSS
table tr td:first-of-type {background-color: purple !important;}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
tr.odd{background-color:#f9f;}
tr.even{background-color:#fcf;}
table tr td:first-of-type {background-color: purple !important;}
</style>
</head>
<body>
<table width="200" border="1">
<colgroup span="1" style="background:purple;"></colgroup>
<tr style="background:purple;">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="odd">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="even">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="odd">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>

You can use the even and odd rules of the nth-child pseudoclass
tr:nth-child(even) {background: #FCF}
tr:nth-child(odd) {background: #F9F}
Followed by:
td:first-of-type,
tr:first-of-type {background: purple}

You can use CSS nth-child (IE9+), which also removes the need for even and odd classes in the HTML.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
td {background-color:#f9f;}
tr:nth-child(even) > td {background-color:#fcf;}
tr > td:first-child {background-color:purple;}
</style>
</head>
<body>
<table width="200" border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>

Table Not Obeying Container Heights

I'm working on a HTML page which I intend to use with PHP later however I have encountered some issues with the height scaling.
My tables and also the elements within the tables are not abiding by the height limits I have set within a container.
I do not want it to extend beyond the page as that would require a scroll bar. Anybody have any suggestions? (Other feedback is welcome)
Code HTML:
<!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>
<link rel="stylesheet" type="text/css" href="summonerTable.css"/>
<link rel="stylesheet" type="text/css" href="navBar.css"/>
</head>
<body>
<div class="summonerContainer">
<div class="navbar">
</div>
<div id="gameDetails">
</div>
<table border="1" id="summonerTeams">
<tr height="100%">
<!-- Begin Definitions !-->
<td>
<table width="100%" id="summonerTeamsDetails" height="100%">
<tr height="5%">
<td width="100%" bgcolor="red">
<p>
Summoner Name
</p>
</td>
</tr>
<tr height="10%">
<td>
<table width="100%" height="100%" id="summonerTeamDetailsInterior" bgcolor="red">
<tr>
<!-- <td width="50%" background="ChampionIcon.png" id="summonerImg" alt="Hello">-->
<td width="25%" bgcolor="aqua">
<img src="ChampionIcon.png" id="summonerImg2" alt="Hello"/>
</td>
<td width="12%">
<table height="100%" width="100%" id="summonerTeamDetailsInterior" bgcolor="aqua">
<tr>
<!-- <td background="summonerSpell.png" id="summonerImg">-->
<td style="vertical-align:bottom;">
<img src="summonerSpell.png" id="summonerImg" alt="Hello"/>
</td>
</tr>
<tr>
<!-- <td background="summonerSpell.png" id="summonerImg"> -->
<td style="vertical-align:top;">
<img src="summonerSpell.png" id="summonerImg" alt="Hello"/>
</td>
</tor>
</table>
</td>
<td width="75%">
<table height="100%" width="100%" id="summonerTeamDetailsInterior" bgcolor="red">
<tr>
<td bgcolor="black">
<p>
tryndamere
</p>
</td>
</tr>
<tr>
<td>
<p>
K/D/A: 1000/1000/1000
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr height="10%">
<td width="100%" bgcolor="red">
<p>
Champion Games
</p>
</td>
</tr>
<tr height="5%">
<td width="100%" bgcolor="red">
<p>
KDR
</p>
</td>
</tr>
<tr height="10%">
<td width="100%" bgcolor="red">
<p>
Ranking
</p>
</td>
</tr>
<tr height="5%">
<td width="100%" bgcolor="red">
<p>
Series
</p>
</td>
</tr>
<tr height="10%">
<td width="100%" bgcolor="red">
<p>
Runes
</p>
</td>
</tr>
<tr height="10%">
<td width="100%" bgcolor="red">
<p>
Masteries
</p>
</td>
</tr>
<tr height="10%">
<td width="100%" bgcolor="red">
<p>
Ranked Wins
</p>
</td>
</tr>
<tr height="5%">
<td width="100%" bgcolor="red">
<p>
Normal Wins
</p>
</td>
</tr>
<tr height="10%">
<td width="100%" bgcolor="red">
<p>
Show Champion Counters
</p>
</td>
</tr>
</table>
</td>
<!-- End Definitions !-->
<td>
<p>
AAAAAAAAAAAAAAAA
</p>
</td>
<td>
<p>
AAAAAAAAAAAAAAAA
</p>
</td>
<td>
<p>
AAAAAAAAAAAAAAAA
</p>
</td>
<td>
<p>
AAAAAAAAAAAAAAAA
</p>
</td>
</tr>
</table>
<div id="summonerMiddleBar">
</div>
<table border="1" id="summonerTeams">
<!-- Summoner Details Table (2) !-->
<tr height="100%">
<!-- Begin Definitions !-->
<td>
<table width="100%" id="summonerTeamsDetails" height="100%">
<tr height="5%">
<td width="100%" bgcolor="red">
<p>
Summoner Name
</p>
</td>
</tr>
<tr height="20%">
<td>
<table width="100%" height="100%" id="summonerTeamDetailsInterior" bgcolor="red">
<tr>
<!-- <td width="50%" background="ChampionIcon.png" id="summonerImg" alt="Hello">-->
<td width="25%" bgcolor="aqua">
<img src="ChampionIcon.png" id="summonerImg2" alt="Hello"/>
</td>
<td width="12%">
<table height="100%" width="100%" id="summonerTeamDetailsInterior" bgcolor="aqua">
<tr>
<!-- <td background="summonerSpell.png" id="summonerImg">-->
<td style="vertical-align:bottom;">
<img src="summonerSpell.png" id="summonerImg" alt="Hello"/>
</td>
</tr>
<tr>
<!-- <td background="summonerSpell.png" id="summonerImg"> -->
<td style="vertical-align:top;">
<img src="summonerSpell.png" id="summonerImg" alt="Hello"/>
</td>
</tr>
</table>
</td>
<td width="75%">
<table height="100%" width="100%" id="summonerTeamDetailsInterior" bgcolor="red">
<tr>
<td bgcolor="black">
<p>
tryndamere
</p>
</td>
</tr>
<tr>
<td>
<p>
K/D/A: 1000/1000/1000
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr height="10%">
<td width="100%" bgcolor="red">
<p>
Champion Games
</p>
</td>
</tr>
<tr height="5%">
<td width="100%" bgcolor="red">
<p>
KDR
</p>
</td>
</tr>
<tr height="10%">
<td width="100%" bgcolor="red">
<p>
Ranking
</p>
</td>
</tr>
<tr height="5%">
<td width="100%" bgcolor="red">
<p>
Series
</p>
</td>
</tr>
<tr height="10%">
<td width="100%" bgcolor="red">
<p>
Runes
</p>
</td>
</tr>
<tr height="10%">
<td width="100%" bgcolor="red">
<p>
Masteries
</p>
</td>
</tr>
<tr height="10%">
<td width="100%" bgcolor="red">
<p>
Ranked Wins
</p>
</td>
</tr>
<tr height="5%">
<td width="100%" bgcolor="red">
<p>
Normal Wins
</p>
</td>
</tr>
<tr height="10%">
<td width="100%" bgcolor="red">
<p>
Show Champion Counters
</p>
</td>
</tr>
</table>
</td>
<!-- End Definitions !-->
<td>
<p>
AAAAAAAAAAAAAAAA
</p>
</td>
<td>
<p>
AAAAAAAAAAAAAAAA
</p>
</td>
<td>
<p>
AAAAAAAAAAAAAAAA
</p>
</td>
<td>
<p>
AAAAAAAAAAAAAAAA
</p>
</td>
</tr>
</table>
<div class="footer">
</div>
</div>
</body>
</html>
CSS Code:
#charset "utf-8";
/* CSS Document */
html, body
{
height:100%;
width:100%;
font:"Courier New", Courier, monospace;
color:white;
}
.summonerContainer
{
width:100%;
height:100%;
padding:0;
margin:0;
resize:none;
}
#summonerTeams
{
width:100%;
margin:0;
padding:0;
table-layout:fixed;
padding:0;
margin:0;
border-collapse:collapse;
height:38%;
}
#summonerTeamsDetails
{
padding:0;
margin:0;
border-spacing:0;
}
#summonerTeamDetailsInterior
{
padding:0;
margin:0;
border-spacing:0;
border-collapse:collapse;
}
#summonerMiddleBar
{
background-color:#000;
color:white;
height:5%;
width:100%;
}
#gameDetails
{
background-color:aqua;
color:white;
height:5%;
width:100%;
}
p
{
font-size:1.5vw;
margin:0;
padding:0;
text-align:center;
}
body
{
padding:0;
margin:0;
}
#summonerImg
{
max-width:100%;
width:100%;
background-size:cover;
/*display:block;*/
}
#summonerImg2
{
max-width:100%;
width:100%;
background-size:cover;
/*display:block;*/
}
table
{
}
Other CSS Code:
#charset "utf-8";
/* CSS Document */
.navbar
{
background-color:#000;
color:white;
height:10%;
width:100%;
}
.footer
{
background-color:#000;
color:white;
height:4%;
width:100%;
}

Basically what is happening is that there comes a point at which the height of 5% for the table cell is too small for the text that is contained inside so, instead of disappearing it ignores the height of the container.
To workaround this you would have to use media queries to rearrange the table - though i recommend not using a table as it will make this bit easier - so that the height is of a size that wont create scroll bars.
See here for a tutorial on media queries: http://www.youtube.com/watch?v=fA1NW-T1QXc

I think the following lines should be corrected:
html, body {
color: white; }
Setting the text color to white is a bad idea as both the text and background would have the same color, making it impossible to read some text (like the AAAAAAAAAA) and also difficult for you to decipher errors easily.
To improve on markup, it is always recommended you seperate html and css code into files of their own. That also makes the code very easy to understand. In addition, you can always view all markup errors on the web console: ctrl+shif+k on most mordern browsers.

A minor CSS issue about footer

This is my simple webpage :-
<html>
<head>
<style type="text/css">
.body{
max-width:3072px;
min-width:3072px;
margin:0px auto;
background: url('Stripes.png') no-repeat #293231;
background-attachment:fixed;
background-position:0% 25%;
}
.back{
z:index:0;
}
</style>
</head>
<body class="body">
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<img src='Main.jpg' class="back"/>
</td>
<td>
<img src='Page2.jpg'/>
</td>
<td>
<img src='Page3.jpg'/>
</td>
</tr>
<tr>
<td>
<img src='MiddleLeft.png'/>
</td>
<td>
<img src='MiddleMiddle.png'/>
</td>
<td>
<img src='MiddleRight.png'/>
</td>
</tr>
<tr>
<td>
<img src='footer.jpg'/>
</td>
<td>
<img src='footer.jpg'/>
</td>
<td>
<img src='footer.jpg'/>
</td>
</tr>
</table>
</body>
</html>
Problem here is due to my large monitor the footer doesn't appear at the bottom of the monitor. It appears somewhere in the middle. How do i ensure that footer appears only at the bottom of the screen irrespective of the size of the screen?

Have a look at:
A Bulletproof Sticky Footer, Woohoo!