Table style messed up when printing - javascript

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.

Related

Convert table to div with CSS without tbody

I want to convert a table to div tables, but when I created the table in Dreamweaver it just added the <tbody> tag. Does I need it when converting the table to div-table ?
Here is the code of the table
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
As you can see I want a table using divs with
width="100%" border="0" align="left" cellpadding="0" cellspacing="0"
What is the correct way to do that? And is neccesary to set another div for the <tbody> tag ?
HTML
<div class="table">
<div class="tr">
<div class="td"></div>
<div class="td"></div>
</div>
<div class="tr">
<div class="td"></div>
<div class="td"></div>
</div>
</div>
CSS
.table {
width: 100%;
display: table;
border-collapse: collapse;
}
.table .tr {
display: table-row;
}
.table .td {
display: table-cell;
vertical-align: middle;
text-align: left;
}
Hope this works for you. :)

Howto avoid MSIE scrolling a table with overflow: hidden;

The last column of a table is intentionally clipped without scrollbars, by using
overflow: hidden;
on the Tables container.
If I enter the columns input field by pressing Tab, on MSIE it scrolls the focused column into the viewport. I would like to turn this feature off and make it similar to FF where it stays fixed.
Edit: I just recognized that FF is doing the same if the column is fully invisible, MSIE will do it even if the column is partially clipped.
Edit: Any javascript solution would be welcome. Something like 'preventdefault' but i have no idea on what event to hook.
#Container {
width: 400px;
overflow: hidden;
}
<div id="Container">
<table>
<thead>
<tr>
<th></th>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<th>Tab</th>
<td>
<input type='text' />
</td>
<td>
<input type='text' />
</td>
<td>
<input type='text' />
</td>
</tr>
</tbody>
</table>
</div>
This is default behaviour of the browser to bring the input into view when focussing (actually when typing), as pointed out by #GyumFox.
What you can do is, either reset the scroll or disable the inputs that are out of bounds of your table, using Javascript.
Option 1: (Reset the scroll)
This will work fine in Chrome and Firefox but give you a flicker in IE.
Fiddle 1: http://jsfiddle.net/eg0ae5cg/1/
Snippet 1:
$("#Container").on("scroll", function() {
$(this).scrollLeft(0);
});
#Container {
table-layout: fixed; width: 400px; overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Container">
<table>
<thead>
<tr>
<th></th><th>A</th><th>B</th><th>C</th>
</tr>
</thead>
<tbody>
<tr>
<th>Tab</th>
<td><input type='text' /></td>
<td><input type='text' /></td>
<td><input type='text' /></td>
</tr>
</tbody>
</table>
</div>
Option 2: (Disable the out-of-bound inputs)
This is a crude example. You need to fine-tune this as required.
*Fiddle 2: http://jsfiddle.net/pkb2t127/1/ *
Snippet 2:
var $tab = $("#Container"),
$txt = $tab.find("input"),
w = $tab.width();
$txt.each(function() {
var lft = $(this).position().left,
rgt = lft + $(this).width();
if (rgt >= w) { $(this).prop("disabled", true); }
})
#Container {
table-layout: fixed; width: 400px; overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Container">
<table>
<thead>
<tr>
<th></th><th>A</th><th>B</th><th>C</th>
</tr>
</thead>
<tbody>
<tr>
<th>Tab</th>
<td><input type='text' /></td>
<td><input type='text' /></td>
<td><input type='text' /></td>
</tr>
</tbody>
</table>
</div>
Instead of disabled property, you could use the readonly property to keep the input value in the form post.

how to replace values in innerhtml using javascript

I'm dynamically(on click of radio button) copying the inner html of one row(in a table) to other but after removing some elements.
var a = document.getElementById('copyrow' + e).innerHTML;
a = a.replace('<input type="radio" name="selectradio" id="shareredio"+e "" a="" href="#" onclick="setText("+e");">',"")
.replace('<div class="custom-radio" style="margin-top:50px;">',"")
.replace('<label for="shareredio"+e""></label>',"")
.replace('<input type="checkbox" name="sharecheck" id="sharecheck"+e"">',"")
.replace('<label for="sharecheck"+e""></label>',"")
.replace('Share fare',"");
document.getElementById('copyDiv').innerHTML = a;
I don't know enough about javascript but if there is any better way then please help...
This is probably not the best way to do it but I thought I'd at least give you an answer quickly. This is using jQuery to manipulate the DOM.
var $a = $('#copyrow'+e).clone();
$a.find('input#shareredio'+e).remove();
$a.find('div.custom-radio').remove();
$a.find('label[for="shareredio'+e+'"]').remove();
$a.find('input#sharecheck'+e).remove();
$a.find('label[for="sharecheck'+e+'"]').remove();
var result = $a.html().replace('Share fare', "");
$('#copyDiv').html(result);
something like this?
$(document).ready(function() {
$('.copy').on('change', function(){
if($('.copy:checked').val() == 'yes'){
$('.table2').find('.rowContents1').html($('.table1').find('.rowContents1').html());
$('.table2').find('.rowContents2').html($('.table1').find('.rowContents2').html());
$('.table2').find('.rowContents3').html($('.table1').find('.rowContents3').html());
}
else {
$('.table2').find('.rowContents1').html('');
$('.table2').find('.rowContents2').html('');
$('.table2').find('.rowContents3').html('');
}
});
});
table {
border: 1px solid gray;
}
td, th {
border: 1px solid gray;
padding: 5px;
text-align: center;
}
div{
display: inline-block;
margin-right: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Copy Contents Over?<br/>
<input type="radio" class="copy" value="yes" name="copyRadio"/> Yes
<input type="radio" class="copy" value="no" name="copyRadio"/> No
<br/><br/>
<div>
Table1
<table class="table1">
<header>
<tr>
<th>Row Number</th>
<th>Row Contents</th>
</tr>
</header>
<body>
<tr>
<td class="rowNum1">1</td>
<td class="rowContents1">This is the Contents of Row 1</td>
</tr>
<tr>
<td class="rowNum2">2</td>
<td class="rowContents2">This is the Contents of Row 2</td>
</tr>
<tr>
<td class="rowNum3">3</td>
<td class="rowContents3">This is the Contents of Row 3</td>
</tr>
</body>
</table>
</div>
<div>
Table2
<table class="table2">
<header>
<tr>
<th>Row Number</th>
<th>Row Contents</th>
</tr>
</header>
<body>
<tr>
<td class="rowNum1">1</td>
<td class="rowContents1"></td>
</tr>
<tr>
<td class="rowNum2">2</td>
<td class="rowContents2"></td>
</tr>
<tr>
<td class="rowNum3">3</td>
<td class="rowContents3"></td>
</tr>
</body>
</table>
</div>
i used .html() to rewrite the contents inside each td. .find() function just traverses down the element tree and finds the descendants $('.table2').find('.rowContents1') is saying in element of class .table2, find the descendants with class .rowContents1.
hope this helps and is what you're looking for

prevent span in td contenteditable

I use contenteditable in td
<table style="width:200px">
<tr>
<td contenteditable style="width:100px" id="1">test</td>
<td contenteditable style="width:100px" id="2">test</td>
</tr>
</table>
when I enter more text in the first td, it make the second td become smaller, then table will bigger than 200px that I specified before, how can I prevent that ?
http://jsfiddle.net/8ZNj3/1/
html:
<table>
<tr>
<td contenteditable>this long text won't overflow</td>
<td contenteditable>test</td>
</tr>
</table>
css:
table {
width: 200px;
table-layout: fixed;
}
td {
width: 100px;
white-space: nowrap;
overflow: hidden;
}
Try this:
<table style="max-width:200px;">
<tr>
<td contenteditable="true" style="max-width:100px; word-wrap: break-word;" id="1">test</td>
<td contenteditable="true" style="width:100px;" id="2">test</td>
</tr>
</table>

How adjust scale of a table in a container on Html?

I have a problem to automatically adjust a table in a div if the user adds collones or lines in the matrix. Even if its size exceeds, I wish he still full in my "container div" by setting a smaller scale. Is it possible to resize only my table keeping the size of my container ? Always keeping my table in the center ?
Here is my css used:
CSS
.container{
background-image: url(image/block_surveillance_content.gif);
background-position: bottom right;
padding-bottom: 10px;
width: 320px;
height:400px;
}
.matrice{
height:100%;
width:100%;
}
HTML
<div id="block" class="container">
<table id="dataArray" class="matrice">
<tr>
<td></td>
<td>
<asp:Table runat="server" ID="matrixColumnLabel" ></asp:Table>
</td>
</tr>
<tr>
<td>
<asp:Table runat="server" ID="matrixLineLabel" style="position:relative;margin:6px"></asp:Table>
</td>
<td>
<asp:Table runat="server" ID="tableMatrice" CellPadding="0" CellSpacing="0" style="margin:6px"></asp:Table>
</td>
</tr>
</table>
</div>
Thanks a lot

Categories