I have a HTML table with 50 ore more Columns, My requirement is if columns doesn't fit in 1 page they should move to next page when printing to PDF.
My html page looks fine with scroll bar to show all columns in one page in a chrome browser.
But when selecting Print pdf the columns are being cut instead or being rendered in a new page.
below is my table html and the css solution I tried https://jsfiddle.net/L91twny2/
<!DOCTYPE HTML>
<html>
<head>
<style>
#media print
{
table { page-break-after:auto }
tr { page-break-inside:avoid; page-break-after:auto }
td { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
}
</style>
</head>
<body>
<table class="table">
<thead style="color:#ceb03d">
<tr>
<th id="Column_Part1_1">Column_Part11</th>
<th id="Column_Part1_2">Column_Part12</th>
<th id="Column_Part1_3">Column_Part13</th>
<th id="Column_Part1_4">Column_Part14</th>
<th id="Column_Part1_5">Column_Part15</th>
<th id="Column_Part1_6">Column_Part16</th>
<th id="Column_Part1_7">Column_Part17</th>
<th id="Column_Part1_8">Column_Part18</th>
<th id="Column_Part1_9">Column_Part19</th>
<th id="Column_Part1_10">Column_Part110</th>
<th id="Column_Part1_11">Column_Part111</th>
<th id="Column_Part1_12">Column_Part112</th>
<th id="Column_Part1_13">Column_Part113</th>
<th id="Column_Part1_14">Column_Part114</th>
<th id="Column_Part1_15">Column_Part115</th>
<th id="Column_Part1_15">Column_Part115</th>
<th id="Column_Part2_1">Column_Part21</th>
<th id="Column_Part2_2">Column_Part22</th>
<th id="Column_Part2_3">Column_Part23</th>
<th id="Column_Part2_4">Column_Part24</th>
<th id="Column_Part2_5">Column_Part25</th>
<th id="Column_Part2_6">Column_Part26</th>
<th id="Column_Part2_7">Column_Part27</th>
<th id="Column_Part2_8">Column_Part28</th>
<th id="Column_Part2_9">Column_Part29</th>
<th id="Column_Part2_10">Column_Part210</th>
<th id="Column_Part2_11">Column_Part211</th>
<th id="Column_Part2_12">Column_Part212</th>
<th id="Column_Part2_13">Column_Part213</th>
<th id="Column_Part2_14">Column_Part214</th>
<th id="Column_Part2_15">Column_Part215</th>
<th id="Column_Part2_15">Column_Part215</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in model.items"> //The table contains several Columns.
<td>Value_Part_1</td>
<td>Value_Part_12</td>
<td>Value_Part_13</td>
<td>Value_Part_14</td>
<td>Value_Part_15</td>
<td>Value_Part_16</td>
<td>Value_Part_17</td>
<td>Value_Part_18</td>
<td>Value_Part_19</td>
<td>Value_Part_110</td>
<td>Value_Part_111</td>
<td>Value_Part_112</td>
<td>Value_Part_113</td>
<td>Value_Part_114</td>
<td>Value_Part_115</td>
<td>Value_Part_21</td>
<td>Value_Part_22</td>
<td>Value_Part_23</td>
<td>Value_Part_24</td>
<td>Value_Part_25</td>
<td>Value_Part_26</td>
<td>Value_Part_27</td>
<td>Value_Part_28</td>
<td>Value_Part_29</td>
<td>Value_Part_210</td>
<td>Value_Part_211</td>
<td>Value_Part_212</td>
<td>Value_Part_213</td>
<td>Value_Part_214</td>
<td>Value_Part_215</td>
</tr>
</tbody>
</table>
</body>
</html>
Related
Let's say I have some html codes like this
<table>
<thead>
<th role="col">Candidate</th>
<th role="col">Party</th>
<th role="col">Total receipts</th>
<th role="col">Total disbursements</th>
<th role="col">Cash on hand</th>
<th role="col">Source reports</th>
</thead>
</table>
If I try opening this html file with a browser, it would automatically add a <tr> tag wrapping the <th> tags, and now the DOM would be like this
<table>
<thead>
<tr>
<th role="col">Candidate</th>
<th role="col">Party</th>
<th role="col">Total receipts</th>
<th role="col">Total disbursements</th>
<th role="col">Cash on hand</th>
<th role="col">Source reports</th>
</tr>
</thead>
</table>
How do I prevent this browser's behavior? I want it to open the file exactly as the source code is, even if it's broken codes.
I need for mobile view som manipulation of table. My table for desktop look like:
<table>
<thead>
<tr>
<th scope="row"> </th>
<th scope="col"> </th>
<th scope="col"><strong>Special Header</strong></th>
<th scope="col"> </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><strong>First</strong></th>
<td><strong>Second</strong></td>
<td><strong>Third</strong></td>
<td><strong>fourth</strong></td>
</tr>
<tr>
<th scope="row"><strong>Text</strong></th>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
</tbody>
</table>
For mobile devices I need to copy first colum to all other columns. Table should look like:
<table>
<thead>
<tr>
<th scope="row"> </th>
<th scope="col"> </th>
<th scope="row"> </th>
<th scope="col"><strong>Special Header</strong></th>
<th scope="row"> </th>
<th scope="col"> </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><strong>First</strong></th>
<td><strong>Second</strong></td>
<th scope="row"><strong>First</strong></th>
<td><strong>Third</strong></td>
<th scope="row"><strong>First</strong></th>
<td><strong>fourth</strong></td>
</tr>
<tr>
<th scope="row"><strong>Text</strong></th>
<td>Text</td>
<th scope="row"><strong>Text</strong></th>
<td>Text</td>
<th scope="row"><strong>Text</strong></th>
<td>Text</td>
</tr>
</tbody>
</table>
I found some Jquery, but this code only append first column at the end:
$('#addcolumn').click(function() {
$('table tr').each(function() {
$(this).append($(this).find('th:first').clone());
});
});
Can you please help to make Jquery code working for my problem, thank!
Martin
You can use insertAfter this will insert element in the set of matched elements after the target .So, for tbody > td you can loop through tr and get first th cloned it then you can check if td is not last-child of tr if yes just add the cloned element after that td.Now , for thead you can simply use eq(0) to get first th and then use insertAfter to add the cloned after every th where scope="col".
Demo Code :
$('#addcolumn').click(function() {
///loop through tds
$('tbody td').each(function() {
//get th
var clone = $(this).closest("tr").find('th:first').clone()
//if td is not last
if (!$(this).is(':last-child')) {
$(clone).insertAfter(this); //insert the cloned th
}
});
//get the header first th
var headers = $("table").find("thead th:eq(0)").clone();
//insert cloned to th where scope=col and not last child
$(headers).insertAfter("thead th[scope=col]:not(:last-child)");
});
$('#normal').click(function() {
//remove th not first child from thead and tbody
$("thead th[scope=row]:not(:first-child)").remove();
$("tbody th[scope=row]:not(:first-child)").remove();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th scope="row"> </th>
<th scope="col"> </th>
<th scope="col"><strong>Special Header</strong></th>
<th scope="col"> </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><strong>First</strong></th>
<td><strong>Second</strong></td>
<td><strong>Third</strong></td>
<td><strong>fourth</strong></td>
</tr>
<tr>
<th scope="row"><strong>Text</strong></th>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
</tbody>
</table>
<button id="addcolumn">Add</button>
<button id="normal">Reset</button>
I am currently working on a html table, and this is what I have so far:
<table class='table' id="intern_table" style='display: block; overflow-x: auto; white-space: nowrap;' >
<thead>
<tr id="intern_table_title" style="color: black">
<th scope="col" class='text-center'>Industry Category</th>
<th scope="col" class='text-center'>Name</th>
<th scope="col" class='text-center'>Job Category</th>
<th scope="col" class='text-center'>Job Name</th>
<th scope="col" class='text-center'>Job Location</th>
<th scope="col" class='text-center'>Deadline</th>
<th scope="col" class='text-center'>hits</th>
</tr>
</thead>
<tbody>
....
</tbody>
</table>
Since I'd like to make elements in the table not to change line, which means if overflow occurs, I'd like to make it scrollable, so I added this to the table element:
<style='display: block; overflow-x: auto; white-space: nowrap;'>
It successfully works on every different device except IOS system. Also, I've tried modifying the overflow-x: auto to overflow-x:touch, but still, the table wasn't scrollable on IOS device. Any ideas about how to solve this problem? Thanks in advance.
Please add the below CSS and check if it works
<style>
table
{
overflow-x: scroll;
}
</style>
Useful links: https://community.grafana.com/t/grafana-5-overflow-scroll-doest-work-on-mobile/5480/5
Use both overflow: scroll and -webkit-overflow-scrolling: touch for iOS-Safari.
table {
white-space: nowrap;
overflow: scroll;
-webkit-overflow-scrolling: touch
}
<table class='table' id="intern_table">
<thead>
<tr id="intern_table_title" style="color: black">
<th scope="col" class='text-center'>Industry Category</th>
<th scope="col" class='text-center'>Name</th>
<th scope="col" class='text-center'>Job Category</th>
<th scope="col" class='text-center'>Job Name</th>
<th scope="col" class='text-center'>Job Location</th>
<th scope="col" class='text-center'>Deadline</th>
<th scope="col" class='text-center'>hits</th>
</tr>
</thead>
<tbody>
<tr><td colspan="7">...</td></tr>
</tbody>
</table>
It's an old post but i was struggling with this and found a solution, i had the same problem, in desktop and browser mobile view, everything was working fine, but in the iphone even in safari and chrome the table came out of the container, but the solution was much simpler than i thought
Just wrap the table in a div with overflow-x: auto, in your case:
<div style="overflow-x:auto;">
<table class='table' id="intern_table">
<thead>
<tr id="intern_table_title" style="color: black">
<th scope="col" class='text-center'>Industry Category</th>
<th scope="col" class='text-center'>Name</th>
<th scope="col" class='text-center'>Job Category</th>
<th scope="col" class='text-center'>Job Name</th>
<th scope="col" class='text-center'>Job Location</th>
<th scope="col" class='text-center'>Deadline</th>
<th scope="col" class='text-center'>hits</th>
</tr>
</thead>
<tbody>
<tr><td colspan="7">...</td></tr>
</tbody>
</table>
</div>
I am trying to implement cellpadding and cellspacing in my forum, but I just can't get the width="100%" to work with it.
Is it possible to set a width while using cellpadding or cellspacing in my CSS?
.categories div.category td tr{
padding: 80px;
width: 500px;
}
echo '
<table class="categories">
<caption>Category: ', $row2['category'], '</caption>
<thead>
<tr>
<td colspan="3">
<th colspan="3"><a href="create_music_sub.php?cat='.$row2['id'].'&admin='.$row2['admin'].'">
Click here to Create Sub Category
</a></th>
</td>
</tr><tr>
<div class="category"><th scope="col">Category</th></div>
<th scope="col">Creator</th>
<th scope="col">Date Created</th>
</tr>
</thead><tbody>';
If what you meant is to set the table's width to 100%, this works.
And as for the code you provided there were mistakes:
When you want to use a th you don't use a td with it.
The div.category should be inside the tr > th not wrapping it.
When you're posting a question please remove the php fragments and provide a working fiddle for us to be able to help you faster.
Please look at the code to see what I did differently. I think the problem was in your html
table{
border:1px solid black;
width: 100%;
}
tr, th, td{
border:1px solid black;
}
td,th{
padding: 10px;
}
/*If you want the last column to be smaller you can change one of them to a certain width*/
.creator{
width:20%;
}
<table class="categories">
<caption>Category: 1</caption>
<thead>
<tr>
<th colspan="3">
Click here to Create Sub Category
</th>
</tr>
<tr>
<th scope="col">
<div class="category">Category</div>
</th>
<th scope="col">Creator</th>
<th scope="col">Date Created</th>
</tr>
<tr>
<th colspan="2" scope="col">
<div class="category">Category</div>
</th>
<th scope="col">Creator</th>
</tr>
</thead>
</table>
<table class="categories">
<caption>Category: 1</caption>
<thead>
<tr>
<th colspan="3">
Click here to Create Sub Category
</th>
</tr>
<tr>
<th scope="col">
<div class="category">Category</div>
</th>
<th scope="col">Creator</th>
<th scope="col">Date Created</th>
</tr>
<tr>
<th colspan="2" scope="col">
<div class="category">Category</div>
</th>
<th scope="col" class="creator">Creator</th>
</tr>
</thead>
</table>
I have the following problem in HTML.
I have this table that contains only a thead:
<table border="1" class="table_legenda" width="100%">
<thead>
<tr>
<th width="8.33%">Codice</th>
<th width="2%">Stato</th>
<th width="8.33%">Creazione<</th>
<th width="8.33%">Registrazione</th>
<th width="6.33%">Autore Cr</th>
<th width="6.33%">Autore Con</th>
<th width="6.33%">Autore Acq</th>
<th width="8.33%">Totale Imponibile</th>
<th width="24.66%">Fornitore</th>
<th width="4.33%">RM riserva</th>
<th width="8.33%">Errore</th>
<th width="8.33%">Azione</th>
</tr>
</thead>
</table>
Now, as you can see, every th cell have setted a percentual width and contains a textual value.
My problem is that if the textual value of a cell is longer than the available space of the cell it will be automatically hidden. I want that the text is automatically wrapped to a new line.
How can I do to obtain this behavior?
Tnx
You need to set the table to have a table-layout:fixed and the th elements to be overflow-wrap:break-word
.table_legenda {
table-layout: fixed;
}
.table_legenda th {
overflow-wrap: break-word;
}
<table border="1" class="table_legenda" width="100%">
<thead>
<tr>
<th width="8.33%">Codice</th>
<th width="2%">Stato</th>
<th width="8.33%">Creazione</th>
<th width="8.33%">Registrazione</th>
<th width="6.33%">Autore Cr</th>
<th width="6.33%">Autore Con</th>
<th width="6.33%">Autore Acq</th>
<th width="8.33%">Totale Imponibile</th>
<th width="24.66%">Fornitore</th>
<th width="4.33%">RM riserva</th>
<th width="8.33%">Errore</th>
<th width="8.33%">Azione</th>
</tr>
</thead>
</table>
demo at http://jsfiddle.net/ma4bc7zj/