I need to print my html so I lay out the way I want the print out to be. But when I click on the print button and get directed to the print preview, the layout are all messed up. Please see my code below:
in html
<div id="print-section" *ngIf="propertyLedger">
<h2>SOSA | PMIS</h2>
<hr>
<table class="table borderless">
<tr>
<th class="col-md-2">Transaction Date</th>
<td>{{dateToday | date}}</td>
</tr>
<tr>
<th class="col-md-2">Collecting Agent</th>
<td>{{propertyLedger.CollectinAgentName}}</td>
</tr>
<tr>
<th class="col-md-2">Unit Name</th>
<td>{{propertyLedger.UnitName}}</td>
</tr>
<tr>
<th class="col-md-2">Payment Type</th>
<td>{{propertyLedger.PaymentType}}</td>
</tr>
<tr>
<th class="col-md-2">O.R. Number</th>
<td>{{propertyLedger.ORNumber}}</td>
</tr>
<tr>
<th class="col-md-2">Remarks</th>
<td>{{propertyLedger.Remarks}}</td>
</tr>
</table>
<hr>
<h3>Details</h3>
<hr>
</div>
<button
class="btn btn-primary" (click)="print()">Print</button>
in the ts file
print() {
let printContents, popupWin;
printContents = document.getElementById('print-section').innerHTML;
popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
popupWin.document.open();
popupWin.document.write(`
<html>
<head>
<title>Print tab</title>
<style>
//........Customized style.......
</style>
</head>
<body onload="window.print();window.close()">${printContents}</body>
</html>`
);
popupWin.document.close();
}
in my layout
as soon as I click the print =>
in my print preview
It seems that the texts in the left part of the table goes to the center. Can you help me with this please. If you have a way to get my desired layout without any table that will be best! Thank you so much.
Just read up. A default in HTML has these properties.
th {
display: table-cell;
vertical-align: inherit;
font-weight: bold;
text-align: center
}
You have to change it to something like this:
th {
display: table-cell;
vertical-align: inherit;
font-weight: bold;
text-align: left;
}
Moreover, if you are not using HTML5 you can also make the tag something like this:
<th align="left" class="col-md-2">Unit Name</th>
Related
On my website, I have a class to change font and text size named class='q'. the class will not work even though I copy and pasted this from the home page as It is menu bar for all pages. All other classes work but not this one, Why?
th.q {
font-family: avenir;
font-size: 25px;
}
<BODY>
<TABLE class='a' border='0' width='100%'>
<TR height='20%'>
<TH class='q'><a class="hover">About</a></TH>
<TH class='q'><a>Products</a></TH>
<TH class='q'><a>Pricing</a></TH>
<TH class='q'><a>Contact</a></TH>
</TR>
</TABLE>
(Referring to your answer:)
Unfortunately, giving multiple elements the same id invalidates your HTML. If the #font selector was enough to fix the problem, you should be able to give the <table> an id instead and select its <th> descendants:
#navigation th {
font-size: 25px;
}
<TABLE id='navigation' class='a' border='0' width='100%'>
<TR height='20%'>
<TH><a class="hover">About</a></TH>
<TH><a>Products</a></TH>
<TH><a>Pricing</a></TH>
<TH><a>Contact</a></TH>
</TR>
</TABLE>
Also, the border, width, and height attributes should be in CSS, not HTML:
#navigation th {
font-size: 25px;
}
#navigation {
border: none;
width: 100%;
}
#navigation tr {
height: 20%;
}
<TABLE id='navigation' class='a'>
<TR>
<TH><a class="hover">About</a></TH>
<TH><a>Products</a></TH>
<TH><a>Pricing</a></TH>
<TH><a>Contact</a></TH>
</TR>
</TABLE>
Of course, you shouldn't be using tables for layout, anyway.
Since nothing else works I have used Ids to fix it.
HTML
<BODY>
<TABLE class='a' border='0' width='100%'>
<TR height='20%'>
<TH id='font'><a class="hover">About</a></TH>
<TH id='font'><a>Products</a></TH>
<TH id='font'><a>Pricing</a></TH>
<TH id='font'><a>Contact</a></TH>
</TR>
</TABLE>
CSS
#font {
font-family: avenir;
font-size: 25px;
}
I am having trouble centering my table in html as I am trying to create a web page for a class.
This is what I have entered into html:
<table align="center" width="50%">
<tr>
<td><b>Resume:</b></td>
<td>Click here to download my resume.</td>
</tr>
<tr>
<td><b>LinkedIn:</b></td>
<td>Click here to open my LinkedIn profile.</td>
</tr>
</table>
However, whenever I try to add 'align' and 'width' in the attribute, it only affects my width. It doesn't center the table.
Does anyone know of a way to both center the table in the page while applying width?
Thank you. I can provide the markup of my html page if needed.
Try this:
<table style="margin:0px auto; width:500px">
However align is obsolete so you may try this:
table {
width:500px;
margin: 10px auto;
}
ie, give width to your table and set margin auto horizontal
just add this to your table
table {
text-align: center;
}
Live Demo
try to put it inside
<p align="center">
<table align="center" width="50%">
<tr>
<td><b>Resume:</b></td>
<td>Click here to download my resume.</td>
</tr>
<tr>
<td><b>LinkedIn:</b></td>
<td>Click here to open my LinkedIn profile.</td>
</tr>
</table>
</p>
Enclose your table in a wrapping div:
<div class="wrapper">
<table>
<tr>
<td><b>Resume:</b></td>
<td>Click here to download my resume.</td>
</tr>
<tr>
<td><b>LinkedIn:</b></td>
<td>Click here to open my LinkedIn profile.</td>
</tr>
</table>
</div>
And then in your css file (if you want to centre the text too):
table {
text-align: center;
width: 50%
}
.wrapper {
margin: 0 auto;
}
You can't center an element without defining the width of its outside container. Let me show you a better way to set it up.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#outside-container {
width: 100%;
}
#form-container {
width: 50%;
margin: 0px auto;
}
</style>
</head>
<body>
<div id="outside-container">
<div id="form-container">
<table align="center">
<tr>
<td><b>Resume:</b></td>
<td>Click here to download my resume.</td>
</tr>
<tr>
<td><b>LinkedIn:</b></td>
<td>Click here to open my LinkedIn profile.</td>
</tr>
</table>
</div> <!-- CLOSE #form-container -->
</div> <!-- CLOSE #outside-container -->
</body>
</html>
I have the following HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Contest Coding</title>
<meta charset = 'utf-8'>
<meta name = 'description' content = 'The free programming competition for everyone'>
<meta name = 'keywords' content = 'programming competition, coding competition, programming contest, coding contest, progrramming puzzles, coding puzzles, contestcoding, contest coding, c, c#, c++, python, ruby, java, javascript, php, haskell, perl, programming, coding'>
<meta name = 'author' content = 'Lewis Cornwall'>
<style type = 'text/css'>
body {
margin: auto;
width: 960px;
font-family: Helvetica, sans-serif;
font-size: 16px;
}
#header {
text-align: center;
}
#leaderboard {
float: left;
}
#leaderboard table {
width: 280px;
}
#puzzles {
float: right;
}
#puzzles table {
width: 640px;
}
.view_full {
line-height: 2em;
}
h1 {
font-size: 60px;
line-height: .5em;
}
table {
border-collapse: collapse;
background-color: lightgrey;
}
table, th, td {
padding: 10px;
border: 1px solid #000;
text-align: left;
}
a {
color: #000;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div id = 'header'>
<h1>CONTEST CODING</h1>
<p>The free programming competition for everyone</p>
</div>
<div id = 'leaderboard'>
<h2>Leaderboard</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href = ''>Ed Southall</a>
</td>
<td>20</td>
</tr>
<tr>
<td>
<a href = ''>Mark Bishop</a>
</td>
<td>20</td>
</tr>
<tr>
<td>
<a href = ''>Krishna Teja</a>
</td>
<td>18</td>
</tr>
</tbody>
</table>
<a href = '' class = 'view_full'>View full leaderboard »</a>
</div>
<div id = 'puzzles'>
<h2>Latest Puzzles</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Solved By</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href = ''>The Truck Driver - Click to View and Solve</a>
</td>
<td>0</td>
</tr>
<tr>
<td>
<a href = ''>The Eight Queens - Click to View and Solve</a>
</td>
<td>0</td>
</tr>
<tr>
<td>
<a href = ''>Palindromic Primes - Click to View and Solve</a>
</td>
<td>3</td>
</tr>
</tbody>
</table>
<a href = '' class = 'view_full'>View all puzzles »</a>
</div>
</body>
</html>
and I ran it on Google Chrome. I right clicked, selected 'Inspect Element', clicked on the body section (so Chrome should highlight the whole body), but it only highlighted the #header section. Why doesn't it highlight the whole page?
Because you forgot to 'clear' the floats.
<div style="clear: both;"></div>
add this on the end of the last floating div.
It because "when an element is floated it is taken out of the normal flow of the document". So I guess the browser doesn't include the floated element to the normal contents of <body> and thus they are not highlighted.
It behaves the same in Firebug in Firefox, BTW.
body {
margin: auto;
width: 960px;
height:750px;
font-family: Helvetica, sans-serif;
font-size: 16px;
}
specify the body height. The above should solve your problem.
I have looked through all the answers posted but I cant seem to get this code to work correctly. I am trying to get the individual cell to change color when I hover over it, but I don't have access to the .css with the service we are using. I am being forced to drop an HTML code box that I can paste my code into specific to the element I am changing, but not the entire .css file...just that element.
Here is my code. Any help in getting the background to change to #ff0000 and the Text to change to #000000 when I roll over the cell would be greatly appreciated.
(It is ultimately my intent to add a >a href for each of the cells as well, but I am trying to do this one step at a time. The >a href will (I hope) add the selected cell to a shopping cart.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<title></title>
<style type="text/css">
body {
background: #000;
}
#wrap {
margin: 0 auto; /* margin 0 auto will center that box in your document */
width: 780px; /*size of your box*/
background: #000;
text-align: center; /* everything will be written in that box will be centered horizontally*/
}
</style>
<div id="wrap">
<table width="780">
<tr>
<td align="center">
<table border=1>
<tbody>
<!-- Results table headers -->
<tr>
<th>Messages Per Month</th>
<th>1 Month Pricing</th>
<th>3 Month Pricing</th>
<th>12 Month Pricing</th>
</tr>
<tr>
<td>500</td>
<td>$14.95/Month</td>
<td>$12.95/Month</td>
<td>$9.95/Month</td>
</tr>
<tr>
<td>1,000</td>
<td>$24.95/Month</td>
<td>$20.95/Month</td>
<td>$17.95/Month</td>
</tr>
<tr>
<td>1,500</td>
<td>$37.95/Month</td>
<td>$31.95/Month</td>
<td>$26.95/Month</td>
</tr>
<tr>
<td>2,000</td>
<td>$49.95/Month</td>
<td>$41.95/Month</td>
<td>$35.95/Month</td>
</tr>
<tr>
<td>2,500</td>
<td>$62.95/Month</td>
<td>$52.95/Month</td>
<td>$44.95/Month</td>
</tr>
<tr>
<td>5,000</td>
<td>$119.95/Month</td>
<td>Not Available</td>
<td>Not Available</td>
</tr>
<tr>
<td>7,500</td>
<td>$179.95/Month</td>
<td>Not Available</td>
<td>Not Available</td>
</tr>
<tr>
<td>10,000</td>
<td>$219.95/Month</td>
<td>Not Available</td>
<td>Not Available</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
In CSS:
td:hover {
background-color: #ff0000;
color: #000000;
}
Or you can use JavaScript/jQuery:
$(document).ready(function() {
$("td").hover(
function() {
$(this).css('background-color', '#ff0000');
$(this).css('color', '#000000');
},
function() {
$(this).css('background-color', 'none');
$(this).css('color', 'black'); // or whatever your original color was
}
);
});
Wrap the cell data with a div (class="cell_hvr") and a link around the content.
.cell_hvr {
padding: 2px;
width: 100%;
height: 100%;
}
.cell_hvr a {
display: block;
text-decoration: none;
}
.cell_hvr a:hover {
background-color: red;
}
<div class="cell_hvr"> (Your content) </div>
You can do this by giving each cell a class
<td class="a">..</td>
and then styling it
<style>
td.a { background-color:#ff0000; }
td.a:hover { background-color:#000000; }
</style>
CSS: td:hover, th:hover { background:#ff0000; color:#000; }
I was looking for the JavaScript version of the answer to this question. But, I am not using JQuery..
I have
oCell = newRow.insertCell();
oCell.style.background = tintTest(myCounts[i]);
myCounts is just an array holding an Int..
but now i just wanted to add the hover background color to my current oCell before smashing it in line and moving on with the loop......
So I found the code below as the only checked answer in a stream of 'can't be done'.. just not sure if this would even help me.
var css = 'table td:hover{ background-color: #00ff00 }';
var style = document.createElement('style');
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
document.getElementsByTagName('head')[0].appendChild(style);
EDIT!!! I just found out my issue (I hope the code snip helps with yours still) I tried to add the hover in CSS and it just isn't supported at all.
This is the code sample of a simple list display with a scroll button..It is working good. But now i want to freeze first row..that is the header..Can you please help me..
<div id="user">
<table class="user_list" frame="box" bordercolor="#c1a3cf"
border="1" cellspacing="3" cellpadding="3">
<thead>
<tr>
<th style="padding-top:15px;"> Nr. </th>
<th style="padding-top:15px;"> Concession Nr. </th>
<th style="padding-top:15px;"> Action Performed </th>
<th style="padding-top:15px;"> Action by </th>
<th style="padding-top:15px;"> Action on </th>
</tr>
</thead>
<tbody>
<?php $result = get_user_actionlog($seite,$entries);
if($seite == 1) {
$number = 0;
} else {
$number = ($seite-1) * $entries;
}
while($record = odbc_fetch_array($result)) { ?>
<tr>
<td width="25" class="rtodata"><?php $number += 1;
echo $number;?></td>
<td width="150" class="rtodata"><?php echo $record['concession']; ?> </td>
<td width="400" class="rtodata"><?php echo $record['action_performed'];?></td>
<td width="75" class="rtodata"><?php echo $record['action_by'];?></td>
<td width="100" class="rtodata"><?php echo $record['action_on'];?></td>
</tr>
<?php }?>
</tbody>
</table>
</div>
and in my CSS file,
#user {width: 900px;height:800px;overflow:auto;}
EDIT:-
scrollable table with fixed header works perfectly in IE 6.0 nad in Firefox but not in IE 7.0. If any of you champs can update that...
You can do this by adding a class to the <thead> and using position: fixed; You'll need to add some padding to your div to make it display as you wish.
Example for you here.
IE isn't good at supporting anything scrolling tables. Editing a table in this way is rarely a good idea in any case. You can have one table with your TH wrapped in a div, then the rest of your info in another table, with another div with overflow auto
Another example.
It's not perfect as you have a lot on HTML visual attributes, you should get rid of those and use CSS only. But this is the basic functionality, it should work in all browsers.
Surround the table with divs with outer and then innera..check the css
.outer {
position:relative;
padding:4em 0 3em 0;
width:54em;
background:bottom;
margin:0 auto 3em auto;
}
.innera {
overflow:auto;
width:54em;
height:9.6em;
background:#eee;
border:2px gray;
}
.outer thead tr {
position:absolute;
top:2em;
height:1.5em;
left:0;
}
.outer th, .outer td {
width:10em;
text-align:left;
I tested the code and it is working. Tested in IE 6.0,7.0 ++ .The code is from internet:-)