I am using flying saucer to print an HTML table where cells in first column can span a large number of rows (to multiple pages). The requriement is for the cell to repeat on each page it spans (like a <thead>).
The library supports CSS2.1 and some CSS3 (e.g. the Paged Media Module), but no JavaScript. And as far as I can see, there's nothing in the standards that can directly do this.
Is there any hack or something that can make this possible?
(I control the code that generates the HTML, but the number of rows on a page cannot be predicted.)
Related
I have four cells on one table and another table with about eight
cells.
I have set the max-width to 300px on all cells. Now the problem I face
is that the cells do not drop to a second row if the page is too
small. (Which is in every matter at the moment haha)
I was wondering how I would go about adding dynamic rows to make the extra content beyond the page width, drop below into a new row?
All the code can be seen in the Developers tools for the following website
(Cells/Rows in the products section is the problem I am facing.)
Kind regards,
Jesse M.
Ohh my sweet summer child,
The <table> element is "designed" to behave that way. The table will try to cramp up all the columns in the possible space and based on various css and html attributes, hide/overflow/cramp-up the data in columns, But never will it allow the columns of one row to flow down to another row.
So you are left with a lot of options using CSS and HTML elements.
If you are into frameworks, I recommend Bootstrap that is designed to work exactly that way, and use the provided col-xx-x classes for the elements that need to be in a row at some screen width, and "drop below into a new row" on other screen width.
I have some tables with print-reapeating thead and many rows. Sometimes a new table starts at the very bottom line of a page, when printing.
I want to force the table to do a page break, if the space left on the page is less than, say 10 cm.
I tried to put an (invisible) overlapping div before that table:
<div style="position:relative;">
<div style="position:abolute; top:0px; width:32px; height:10cm; overflow:visible; page-break-inside: avoid;"> </div>
</div>
<table goes here...>
But it's not working. (FF and IE11)
Is there any way to do that? (I'm trying to print a book, and the table is a new chapter).
I believe this is a bug in Chrome.
The code below demonstrates the best method I've found for multi-page table printing. It has the following features:
column headers repeat on each page
if a page break occurs near the top of the table, it will not leave behind an orphaned set of column headers (a problem which isn't limited to just Chrome)
page breaks occur only between rows
no need to worry about paper size or how many rows will fit-- the browser handles everything automatically
cell borders are always fully closed
the above 3 features apply whether or not the table has headers
works in Chrome!
... and the following known limitations:
doesn't support s (tfeet?)
only supports 1 (which is apparently the most you're allowed to have anyway).
only supports top-aligned
any CSS size values that affect height (including border-width and line-height) must be in px
table cannot (easily) be changed dynamically after the js has run
column widths cannot be set by applying width values to individual table cells; you should either let cell content automatically determine column width, or use s to set specific widths, if needed
I put two tables side by side: the left one (1px) only has a thead with 10cm height, the other contains the contents to print.
That sort of works.
I used float:left; for both tables, so they are side-by-side, but IE11 puts underneath.
Any better idea or an improvment of this approach?
I am looking for a way to resize a tables contents using CSS to make sure the contents all show up when printing but yet still keep the text from wrapping for any individual cell. In this example,
<table class="datatables" id="table1">
<tr>
<td style="white-space:nowrap;">This is a table with a bunch of data that stretches off the page when printed.</td>
<td style="white-space:nowrap;">I want it to print on one line, not wrap but also be sized small enough to fit on a printed page.</td>
<td style="white-space:nowrap;">It currently cuts off most of this last column.</td>
</tr>
</table>
The last td is mostly cut off when printing but all these display as I intended on one line. For example purposes I put the style inline but would be using style sheets. My ideal solution would automatically resize the font to fit still on one line per row without wrapping. Any thoughts would be appreciated.
Controlling the output of printing is a nearly impossible task. You never know the variables of what printer the user is using, what fonts are available, what settings are set, etc.
I've had this issue before, and the most clean solution for the user was to convert the table to a .pdf, which will render nearly identical across machines and printers. While it may not seem so easy to do from a technical standpoint, there is a pretty straightforward solution: datatables.
Using the "table tools" plugin, you can create a .pdf formatted version of any table with just a few lines of code and the addition of a few extra files. Here's a working demo In a nutshell, provided your table is correctly formatted and not insanely large (make sure to use <thead> tags) then you should just be able to upload the required files, apply the demo code with a change in the selector to match your table, reference the swf file that facilitates creation of the .pdf, and it should work smoothly. Most issues I've seen in setup have to do with incorrect reference to the swf path.
Voila, printable, simple code.
Maybe you can try with
#media print
{
table.datatables {font-size:10px} /*Type the value that you want*/
}
You can check a print settings in your Chrome Browser by using "Find the Scale Fields" in "Print Options" and adjust the page size on your requirements.
This is not a full-proof solution, you need to check it which values will works for you.
Use CSS transform scale property.
In my case my table width was more hence I did this using javascript.
Since my width was too much, I scaled it lower and adjusted the margin and after javascriptwindow.print() I bring it back to the original state.
document.getElementById('your table id').style.transform = ("scale(0.8)");
document.getElementById('your table id').style.margin = ("0 0 0 -15%");
You can also do it using same property in CSS.
#table {
transform: scale(0.8); //Adjust this accrding to your need by printing
margin : 0 0 0 -15%; //Adjust this accrding to your need by printing
}
I created a table containing one row and many cells. Each cell contains another table with many rows to have data like image, link etc.
The final result is a form of product pager as seen here:
http://askmeexpress.com/
My problem is that cells apear like rows (vertically instead of horizontally) in browsers other than IE. Please check the link in IE then in Chrome and see the difference.
You set TDs to display as block so they display as such
As per CSS specification Chrome and Firefox display this correctly in separate rows. IE displays it incorrectly as table cells (why am I not surprised?).
So in order for your cells to display correctly in Chrome and Firefox and other proper browsers change your cells' display style to table-cell rather then block. Or at least as empty string:
$("YourTdSelector").css("display", "");
Or even better don't use tables for what you're trying to achieve but rather semantically correct elements. In your case that would be the UL element because you're displaying a list of something.
Tables should only be used for tabular data in semantic terms to make your pages accessible to those that need it (i.e. screen readers for the blind).
http://weknowwhatyouredoing.com/
I'm trying to make a table like this one where I have a profile image to the left, a bold title/name and text underneath the bold title/name, and date/time stamp underneath that... basically the same views as on that website (http://weknowwhatyouredoing.com/) or better (or twitter tweets).
Anybody know of any tutorials on how accomplish this? I'm currently using table with multiple columns but it seems that when one cell is big, all the cells in that row become the same height and i don't like that. In android this is called a list view but i'm not sure what it is in the html/css world, any help please? Thanks in advance
You could make multiple tables floating next to each other. The elements on the website you show aren't aligned as fa as I can tell.
A tutorial on rowspan and colspan can be found here.
If you make the image span 3 rows, you can put the bold text, content and date stamp each into one row. With valign you can vertically position elements within a row if the row becomes higher than the content. This will probably happen if the 3 rows together are higher than the one spanning row containing the image.
As a quick fix for your issue with the equal row heights, you could use the same layout method as they use on weknowwhatyouredoing.com.
Wrap each column in a separate <div>, and then place your <table> inside.
4 containers, 4 tables with independent row heights.
You shall give a look at the Twitter Bootstrap CSS library Twitter Bootstrap
It's pure HTML5/CSS using only divs.
for improve your knowleges in HTML, you can see W3C (Word Wibe Web Consortium) specs. For sample, if you see this page, W3C explain all structure, attributes, for Table element.
You can find lot of tutorial in google ( search "tutorial create Table HTML" ).
Also, you can help you to understand website structure with browser plugins that display hover element in specific website. ( firebug for Firefox and Chrome, Dragonfly for Opera browser...)
Why not use multiple list elements? Tables definitely don't give you flexibility for responsive designs. Making multiple columns of list elements can be rearranged as needed with limited restrictions