So my table with a lot of data overlaps my footer on my print page, how do i make when the data is about to reach the footer the remaining data will go to the second page, here is the ss:
here you can see that the table with data overlaps my footer(starting with the "NOTE:")
here is my code for the footer:
<div class="divFooter" style="display:block;position:absolute;width:100%;bottom:0px;">
<div class="row" style="font-size:12px;"><div class="col-md-12">
<div style="width:100%;height:20px;border-top:1px solid #E8E8E8;border-bottom:1px solid #E8E8E8;background:color:"><p style="margin-left:10px;">NOTE:</p> </div>
<div style="height:100%;width:50%;border-right:1px solid #E8E8E8;float:left;">
sample fiddle https://jsfiddle.net/h6y4srez/
Quick question regarding this table.
The footer you have coded. It seems to be entirely related in subject to that of the main body of the table. Is this correct?
If so, can you simply not put the end part within a <tfoot> tag, thus joining it to the table proper and preventing it from running over any other content?
In your CSS:
thead, tfoot { display: table-row-group }
This makes them render as normal rows, without attempting to repeat them when there is a page break.
Related
I am currently working in a HTML-editor of a CRM software, so I am limited to HTML and CSS.
Within an invoice there is a table of items, description, amount, price etc. In some cases the description is to long to fit into one page, for example if there are more products. In the beginning the element was just put to the next page. But I wanted to let the description split, so I added:
tr {page-break-inside: auto;}
That works, but on the second page the splitted content is shown in the header of the table.
I tried page-break-inside=avoid; page-break-after=avoid in the tr of the table header and in the styling elemt of the table.
I expected that only the content in the cells is split and not the content of the cells into the table header.
I am looking for a solution to make the table header fixed and avoid overlapping of the splitted content.
I tried to work with these attributes but theader is always overlapping.
table { page-break-inside:auto }
tr { page-break-inside:auto; page-break-after:auto }
thead { display:table-header-group }
This is how the table header looks like:
<thead style='display: table-header-group;';>
<tr style='height:32px;position: relative; z-index: -1;page-break-inside:avoid; page-break-after:auto'>
I have a table with 2 columns. The table itself is responsive.
Since usually a row is not filled-up with text (space remains) the extra-space is distributed on both columns.
I want to have the left column as wide as it needs for its content and put the rest including the non-used space to the right column. The reason is that the right column's content changes, while the left column's content is fixed. Distributing the non-used space to both columns let the right column jump with no reason for it. But I cannot express the width of the left column in grid, percent or pixel.
I'm pretty sure that I knew a very easy solution for that simply with html and css. But I'm not remembering it now.
The code has nothing special. Simply take into account, that it contains mustache to fill the right column. Replace it with content whatever you want.
<table class="table">
<tr>
<td>Company</td>
<td>{{company.name}}</td>
</tr>
<tr>
<td>Department</td>
<td>{{department.name}}</td>
</tr>
<tr>
<td>Tags</td>
<td>
<!-- this is replaced with a list of tags -->
{{#associatedTags}}
<span class="tag">{{name}}⊗
</span>
{{/associatedTags}}
</td>
<tr>
…
<tr>
</table>
As you can imagine, adding a tag to the tags row makes the content longer. As a result the right column gets more width. Its left border moves to the left shrinking the extra space on the left column. This looks ugly, because it shows a move without having a non-technical reason for it.
I think this is what you're looking for, although it's not specific to Bootstrap.
.table tr td:first-child {
width: 1%;
white-space: nowrap;
}
http://www.codeply.com/go/OVeCpnFY7Q
Some code will be usefull. Anyway, you could add an extra class for your row and add the following CSS:
.extraclass > .col {
background-color: #FABABA;
width: 200px !important; /* set the desired width */
}
<div class"container">
<div class="row extraclass">
<div class="col">
example text
</div>
</div>
</div>
Hope it helps
I have a big list of data inside HTML table that is fed from the database, which then printout to PDF. The table just ordinary table, with couple of columns, but the style I use has border left and right to show the vertical line on each table on every page, but not the horizontal like. I use CSS to draw the border, something like this:
td {
border-left: 1px solid #000;
border-right: 1px solid #000;
}
The problem I got is when paginated (printed to PDF) on each page at the bottom of the table, it wasn't closed so it looks open. I want to close the border at the bottom of the table of each page.
I managed to draw the border of the last row using tfoot, this works great until I got to the very last page, apparently it also draw it there too. Don't want it to draw at the end because I've made a summary there already, so having the line there is just not good.
<thead>...some header...</thead>
<tfoot>
<tr><td class=myborder> </td></tr>
</tfoot>
<tbody>...list of data (100 rows of tr)...</tbody>
The CSS, I use red for hightlight on my table:
.myborder {
border-top: 1px solid red;
}
So my question is there any css that can draw the simple line at each page ending but not at the last page?
If using tfoot, I've tried looking for solution, it pretty much like the post below, but a bit different, I don't want tfoot to show on the last page, but any other page is fine.
How to make TFOOT to show only at the end of the table
Thanks in advance.
PS. Thanks Ben for the format fixes, this is my first post :)
I've updated your question and while formatting I noticed at least a misplaced <td> in your <tfoot>. Also you're opening with <foot>, which should be <tfoot>.
You may use something like this to apply for all tfoot except the last child.
tfoot:not(:last-child):after {
border-bottom: 1px solid red;
}
First answer, correct me if there is any mistake.
When I use the page break attribute and then look at my page from i.e7 and click print preview, it generates 3 blank pages between the first and second page.
I have copied some sample code here: http://jsfiddle.net/vW54X/embedded/result/
You can't really replicate the error though because its embedded as an iframe
IE7 does funny things with page-break-after:always.
Instead of applying it to your div#cl, create a new, empty p or div and apply it to that. Place that after the #cl, so
<div id-"cl">
//all your content
</div>
<div class="pageBreak"> </div>
Style it with page-break-after: always but hide it until print.
The solution is giving your body a height: auto;
When I had a similar problem, I resolved it by setting the maximum height of each of my <div>s to a very small amount and gradually increasing it until the problem appeared again.
Basically, just this:
.your-container-div {
max-height: 27.4cm;
}
I have huge amounts of data populating an HTML <table> having more than 200 rows and 200 columns.
However, when I scroll the page horizontally or vertically to view the data, the header columns (like th for instance) go beyond the page.
How can I scroll through the table and still keep the top row and leftmost column fixed so that I will always know what data I'm seeing.
Here is a good solution: http://www.imaputz.com/cssStuff/bigFourVersion.html
Although implementing a JavaScript/jQuery solutions opens a lot more doors.
See this SO post for more info: HTML table with fixed headers?
You can use jQuery or you can try to mix the solution below:
header: http://fixed-header-using-jquery.blogspot.com/2009/05/scrollable-table-with-fixed-header-and.html
header and first column too but still in beta:
http://fixedheadertable.mmalek.com
Just the first column fixed:
http://www.java2s.com/Code/HTMLCSS/Table-Style/Fixedtablefirstcolumn.htm
Use simple solutions when they exist. :)
You can use a tbody and give it either fixed height or max-height and overflow: auto;:
CSS:
tbody {
max-height: 500px;
max-width: 100%;
overflow: auto;
}
And HTML like so:
<table>
<thead>
<tr><th>headers</th></tr>
</thead>
<tbody>
<tr><td>body</td></tr>
</tbody>
<tfoot>
<tr><td>footers</td></tr>
</tfoot>
</table>