0
303
ViewsHow to keep table elements fixed with JavaScript
I want the tags inside the table to be fixed when printing. The code I wrote works well in View, but when printing in JavaScript, if one of the columns is large, the rest of the columns go in the middle but I want everyone to stay on top I used position: fixed but the table crashed.
<script>
function printDiv() {
var divToPrint = document.getElementById('table');
var htmlToPrint = '' +
'<style type="text/css">' +
'table th, table td,table tr {' +
'font-family:B Nazanin;'+
'border:0.1em solid #000;' +
'text-align:center;' +
'font-size:14px;' +
'padding:0.2em;' +
'}' +
'</style>';
htmlToPrint += divToPrint.outerHTML;
newWin = window.open("");
newWin.document.write(htmlToPrint);
newWin.print();
newWin.close();
}
</script>
·
Juan Pablo Isaza
1 answers
Answer question0
You need to use vertical-align: top; to make the content in each cell. display at the top.
<style>
.table-bd{
border-collapse: collapse;
border: none;
width: 200px;
}
.table-bd td{
border: 1px solid #CCCCCC;
word-wrap: break-word;
word-break:break-all;
width: 50px;
height: 80px;
vertical-align: top;
}
</style>
<table class="table-bd">
<tr>
<td>asdfasdfasdf</td>
<td>asdfasdfasdfasdfasdf</td>
</tr>
<tr>
<td>asdfasdfasdf</td>
<td>qwerqwerqwerqwerqwer</td>
</tr>
<tr>
<td>erwtewyrettyrety</td>
<td>tyuirtyiuiytugfhdfgh</td>
</tr>
</table>
·
Juan Pablo Isaza
Report
Answer question