We Keep Coding

Table style messed up when printing

I'm trying to print a simple table, yet the layout seems to mess up. Does anybody know why?
Table to print
Print Preview
Here is the HTML and JS I have used to create the Table.
function printData() {
var divToPrint = document.getElementById("printtable");
newWin = window.open("");
newWin.document.write(divToPrint.outerHTML);
newWin.print();
newWin.close();
}
$('button').on('click', function() {
printData();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="printtable" style="border: 1px solid black; width: 90mm; height: 29mm;">
<div style="float: left; font-size: 10px; position: relative; top: 50%; transform: translateY(-50%); margin-left: 2mm;">
<p>
<img src="/" alt="" height="30">
</p>
<table>
<tbody>
<tr>
<td><u>Row 1</u> :</td>
<td> Row 1</td>
</tr>
<tr>
<td><u>Longer Row 2</u> :</td>
<td> Row 2</td>
</tr>
<tr>
<td><u>R3</u> :</td>
<td> Row 3</td>
</tr>
</tbody>
</table>
</div>
</div>
<br />
<br />
<button>Print me</button>

You need to specify style related to print .
You can use #media print to specify styles for print

In the end, I used the solution proposed here is such alignment achievable without <table>?
By aligning my text without using the table tag, the text prints just fine.

html tables are rendering/moving onmouse over

I have multiple tables, on mouse over on the row tables are floating, tables should be constant without moving. When i mouse over on the first or second table row the other tables are rendering which should not be the case. Please find the fiddle http://jsfiddle.net/L1b5542r/1/ .
Sample code:
<div id="test1" style="float: left; border: 0px solid #99ffff;">
<table cellpadding="2px" cellspacing="2px" style="border: 0px solid #ffffff; margin-right: 15px; margin-bottom: 20px;">
<tr>
<td><a id="#044b66">
<table cellpadding="2px" cellspacing="2px" style="border: 2px solid #657383; margin-bottom: 15px;" width="300px">
<tr>
<td colspan="3" style="padding-left: 0px; padding-right: 0px; padding-bottom: 0px">
<table width="300px">
<tr>
<td class="rowrowbStatus">COLUMN1</td>
<td class="rowrowbStatus">COLUMN2</td>
</tr>
</table>
<table width="300px">
<tr><td class="status1">row1
<img class="statusImg1" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" /></td>
<td class="status2">rowb1
<img class="statusImg1" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15"/>
</td></tr>
<tr><td class="status1">row2
<img class="statusImg1" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" /></td>
<td class="status2">rowb2
<img class="statusImg1" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15"/>
</td></tr>
<tr><td class="status1">row3
<img class="statusImg1" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" /></td>
<td class="status2">rowb3
<img class="statusImg1" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15"/>
</td></tr>
<tr><td class="status1">row4
<img class="statusImg1" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" /></td>
<td class="status2">rowb4
<img class="statusImg1" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15"/>
</td></tr>
</table></td></tr>
<tr>
<td colspan="3" style="padding-left: 0px; padding-right: 0px; padding-bottom: 0px">
<table width="300px">
<tr>
</tr>
</table></td></tr>
</table>
</a></td>
</tr>
</table>
</div>
How can i make tables not to be moved/rendered when i mouse over on any row in the table.
PS: You can notice this behavior if the result screen in http://jsfiddle.net/L1b5542r/1/ is dragged to view full screen and mouse over on any row of first or second table. Please suggest.Thanks.

Edit
So below simply hid the problem by making the rows not change size when the image appeared by making the image small enough. With regards to a larger image size, you'll still get the shifting. What is happening is the use of 'float: left' is causing issues:
When table1 (top left) gets larger say it is actually moving the table below it (table 3) to the right and then shifting table 4 to some position a way bit further down and etc.
I'd recommend, if the format you want is two tables side by side, which is what I get in the fiddle, just to add some extra divs to prevent this move (or restart without using float!)
ie a 'row' div containing tables 1 & 2, another containing 3 & 4, and finally one with 5 & 6. this way you can plonk any size image in the tables and the rest will line up neatly below (though larger images than row size will still warp the row to fit the image unless you specify overflow hidden!)
Result: http://jsfiddle.net/L1b5542r/5/
http://jsfiddle.net/L1b5542r/3/
Edited so the image which appears on hover doesn't affect the size of the row and hence doesn't shift the rows down and force the tables out of alignment
New CSS:
td.status1 > img {
display: none;
float:right;
height: 8px; /* define suitable height otherwise will shift*/
}
td.status1:hover > img {
display: inline-block;
}
td.status1:hover {
background-color: #C0C0C0;
padding-left: 15px; /* padded to keep text central*/
width: 85px;
}
td.status2 > img {
display: none;
float:right;
height: 8px;
}
td.status2:hover > img {
display: inline-block;
}
td.status2:hover {
background-color: #C0C0C0;
padding-left: 15px;
width: 85px;
}

toggle effect horizontal in td using JavaScript

In my application has master page. One of the content place holder has design as
<table>
<tr>
<td width='170px'> -------td1
<table>... header label</table>
</td>
<td width=85%>--------------td2
</td>
My requirement is
when click on header label td1's width set as 1% and td2's width set as 99% and the page adjust automatically as per width.
when again click the header label the width need to set as original .
how to achive this...
Here's what I have so far:
$(function () {
$('.style1').click(function () {
$(".style2").slideToggle();
});
});
<style type="text/css">
.style1 { width: 182px; }
.style2 { width: 99%; }
</style>

$(function () { $('.lblStyle').click (function () {$(".style1").slideToggle();}); });
<style type="text/css">
.style1
{
width: 12%;
}
.lblStyle
{
width: 99%;
}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr align="center">
<td valign="top" align="center" class="style1">
<table border="0" cellspacing="0" cellpadding="0" style="width: 170px">
<tr>
<td style="width: 170px">
<asp:Image ID="imgHeader" runat="server" ImageUrl="~/App_Themes/RIBO/Images/logo_header.png"
Width="170px" Height="80px" Style="display: none;" />
</td>
</tr>
<tr>
<td class="menu_header">
<asp:Label ID="lblMenuHeader" runat="server" Text="" EnableTheming="false" Width="170px" />
</td>
</tr>
<tr>
<td>
<ul class="inner_menu">
<asp:Panel ID="Panel2" runat="server" Width="170px" Height="100%">
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
</asp:Panel>
</ul>
</td>
</tr>
<tr>
<td style="background-image: url(../RIBO/App_Themes/RIBO/Images/hd_menu_bottom.png);
background-repeat: no-repeat;">
</td>
</tr>
</table>
</td>
<td width="95%" valign="top" align="left">
<asp:Label ID="lbldummy" runat="server" Text="Test" CssClass="lblStyle"></asp:Label>
<iframe runat="server" id="ifrmMainContent" name="ifrmMainContent" src="MyPage.aspx"
frameborder="0" marginheight="10px" marginwidth="1px" style="overflow: scroll;
height: 800px; width: 100%; margin-left: 0px; margin-top: 0px;"></iframe>
</td>
</tr>
I have achieved with the above code. with two styles. Instead of lbldummy how to use image with appropriate arrow marks!(If hide will display right arrow, when want to hide left indicate arrow).

Setting scroll height of a DIV using javascript and css

I have this div which pops up when an action is triggered. When I scroll down the page, it still remains on top of page. I want to set the scroll height so it moves in relative position to the page scroll. Simply making the position : relative does not work. How can I use javascript get this? Help.
<form name="" action="" method="POST">
<div id='divSearchAndReplace'>
<table id='divSearchAndReplace_Header' width='100%'>
<tr>
<td>
<table>
<tr>
<td align='left'></td>
</tr>
</table>
</td>
</tr>
</table>
<table width='100%' border='0' cellspacing="4" cellpadding="2">
<tr><td colspan='2' nowrap height='10px'></td></tr>
<tr valign="top">
</tr>
<tr><td colspan='2' align='right' style='padding-right:12px;'><input class='form_button' type='submit' name='btnSubmit' value='Replace' onclick='return checkSearchAndReplace();'/></td></tr>
</table>
</div>
</form>
this is the css
#divSearchAndReplace { width:450px; height:240px; border:1px solid #336699; background-color:#ffffff; position:absolute; left:200px; top:75px; display:none; }
#divSearchAndReplace table { width:450px; border:0px; align:center; }

Are you maybe looking for position: fixed in CSS?

How can I make an HTML TD that's set to overflow:hidden scroll smoothly with the click of a button through Javascript?

I have an HTML TD with overflow set to hidden. It's width is 850px and height is 567px. The content inside should measure 567px high and 1700px wide. I want the user to be able to click a JavaScript button that scrolls the next table that's inside the TD into view. How can I do this? I've tried document.getElementById("tilesDisplay").scrollBy(10,0) but that didn't work.
<tr>
<td style="margin:0px; padding:0px; width:100%;" cellpadding="0px" cellspacing="0px">
<table style="margin:0px; padding:0px; width:100%; table-layout:fixed; overflow:hidden; white-space: nowrap;" cellpadding="0px" cellspacing="0px">
<tr>
<td style="background-color:#000000; vertical-align:middle; text-align:left;" onmouseover="arrow(this,1,'left');" onmouseout="arrow(this,2,'left');" onclick="ChangePortfolioImage('left');"> <img src="../images/general/arrow-left.png" style="width:25px; cursor:pointer;" /></td>
<td id="tilesDisplay" style="background-color:#000000; width:850px; height:567px; overflow:hidden; border:solid 1px #758264;">
<table>
<tr>
<td style="width:850px; height:567px;">
<table style="width:850px; height:567px;">
<tr>
<%
rowCount=0
for i=1 to (ubound(theseImagesSplit)-1)
if rowCount=3 or rowCount=6 then
rowCount=rowCount+1
response.Write("</tr><tr>")
else
if rowCount=9 then
rowCount=1
response.Write("</tr></table></td><td style=""width:850px; height:567px;""><table style=""width:850px; height:567px;""><tr>")
else
rowCount=rowCount+1
end if
end if
RS.Open "Select * FROM Portfolio WHERE ID=" & theseImagesSplit(i),conn
tiID=RS("ID")
tiImageURL=RS("imageURL")
tiCaption=RS("caption")
tiFrontPic=RS("frontPic")
tiCollection=RS("collection")
RS.Close
if cInt(tiID)=cInt(firstImage) then
tiSummary="true"
tiBorder="#3c4534"
else
tiSummary="false"
tiBorder="#bdc49f"
end if
%>
<td style="height:150px;"><center>
<table id="thumbnail<%=i %>" class="thumbnail" style="height:132px; width:198px; cursor:pointer; border:solid 1px <%=tiBorder %>;" summary="<%=tiSummary %>" onmouseover="this.style.border='solid 1px #3c4534';" onmouseout="thumbnailOut(this);" onclick="ChangePortfolioImage('<%=tiID %>'); updateThumbnailBorders(<%=(ubound(theseImagesSplit)-1) %>,<%=i %>);">
<tr>
<td style="border:solid 3px #000000;"><img src="<%=tiImageURL %>" style="height:130px;" /></td>
</tr>
</table>
</center></td>
<%
next
%>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td style="background-color:#000000; vertical-align:middle; text-align:right;" onmouseover="arrow(this,1,'right');" onmouseout="arrow(this,2,'right');" onclick="ChangePortfolioImage('right');"><img src="../images/general/arrow-right.png" style="width:25px; cursor:pointer;" /> </td>
</tr>
</table>
</td>
</tr>

I think the easiest way would be to use a container div positioned relatively and offset the position of the container div on the button click event.
<table>
<tr> <td>
<div id="table-container"> <table class="subtable"> .... </table></div>
</td> </tr>
</table>
cont = document.getElementById('table-container');
offset = 850; // Or whatever the width of the subtable
<input onClick = "cont.style.left = cont.style.left - offset;">