I have an application that generates tables for reports; however during printing - the tables may get split, which causes some of the information to get cut off ( I mean it's only printing the top half of letters and then getting split to the next page ).
I've tried page-break-before ; however that causes every table to be on it's own page. page-break-inside seems to be only supported by Opera (And I'm not even sure if that's what I want).
What I'm hoping to find, is something that if the entire table cannot be fit onto a page - it is pushed to the next; or better yet - if the next row is started on the next page.
Any help would be appreciated!
Use Javascript:
Parse data inpage and reformat
Get table height
If table height > page allowed height = add a new table
Each page fits into:
div.page {
height: 842px;
width: 595px;
}
The simplest way of achieving this is a print button that opens a new page, the data is there in a format that Javascript can convert it into a table.
This is the only real accurate way I know of configuring a page of data that splits in tables.
Related
I have a table, this table gets data from a server, and has a few fields,
The data from the server is plain text, but no limit on how many characters.
The table should not be over 900px wide.
View example
As you can see in my plunker some texts gets very long, so they take several rows, while some fit on the first row.
In my opinion, this is not readable at all, it's horrific.
And here's the real problem, since this should be printed some time, all text must be visible.
I have tried fooling around with some fixed tables and overflow: hidden properties, though this does make the table more attractive, a lot of text would be litterly unreadable
Basically what I am asking is if there are any tried methods for displaying (maybe) a lof of texts in tables, and have it readable?
Edit: Okey, as it seems this is the way to do it, there can be some stylig done, but nothing major. There's is one thing that bothers me though, and that's that the title field (field1) is pushed to the left so much.
I know I can set width, but that requires the table to be fixed, and that will cause problems, I need the table to be as dynamic as possible.
Is it possible to set priortiy on which cells the table will break words on first? So that maybe field 1 and 5 have a low priority, so those cells will be less likely to have line breaks?
The ideal solution, and the solution I have used in most of the projects i've done is to add a modal.
For example, if you have a pragraph of texts, the best thing to do it to display a few words and then add a View more button which will open up a modal which will display the entire paragraph.
You can also try to add a View button in the end of each row in another column. Clicking this would open a modal which shows all the data in that row entirely.
This way you can show some information in the table without making it ugly and also provide all the details in the table itself(although its not present in the table view).
It looks fine to me as well, although you may try alternating row colors... add the following rule to your css... you can of course change the color to whatever you like. I find it improves readability:
tbody tr:nth-child(odd) {
background: #eee;
}
I work with ssrs with a dynamic row data in matrix/tablix. There is possibility when I have more than one page (say it two pages) where the data just fill half of the second page and leave a blank space below (half page blank space on the second page). How is the way to fill this blank space with empty rows? (whether rendering empty rows in the tablix, or inserting background image, or anything. I don't have any solution yet as it is dynamic data with many possibilities of the blank space size on the page)
Unfortunately there aren't any settings in the reporter that support this behavior. There are however several workarounds you could use to get the wanted result.
[1]
You could determine the amount of rows that fit on the first page and on the second page, just in case you have items above the
table on the first page. Before you send the datasource to the
reporter count the total rows and check if it exceeds the first page.
Then calculate the number of rows missing to fill an entire second
page (or third/fourth... if you ever get more data). Finally you add
empty rows/objects at the end of your datasource, which will of cource
cause the pages to be filled to the end.
As was pointed out before, this solution is only possible when working
with fixed row heights. If certain columns can have multi-line cells
then these could be checked as well and taken in account when
calculating the number of rows being displayed on the page. This makes
it slightly more complicated but is still a valid solution if you can
predict which columns might be troublesome.
[2]
A second solution would be to hide the table borders and place the table inside a rectangle that spans the maximum size of the
page. The borders of this rectangle can be used to display the table
outer borders and columns can be displayed by adding lines inside the
rectangle. This will cause the columns to fill the last page of the
report automatically. Unfortunately this isn't a solution to display
horizontal grid lines.
[3]
A third approach is adding an extra table directly below your table
with the same size of columns. Using the same method as from the first
solution you could fill the second table to represent the empty rows.
You'll probably have the same issue as with the first solution when
dealing with multi-line rows though.
I believe solution [1] and [3] will offer the most exact solution, if you're willing to do the math. If you don't want any horizontal lines then I suggest using approach [2].
Using an image to overlay the borders is of course another option but then you'll have the same issues when dealing with the multi-line rows. If you plan on working with fixed row heights, where you leave space for multi-line cells then this is becomes a valid approach but so does solutions [1] and [3].
Update:
If you only need the filled pages for printing you could make sure you add enough empty rows to fill at least the entire last page, these may go to a new page (1 new page, not 2... you can use a simple calculated guess for this) and exclude the last page when printing.
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'm new on this particular project, and I've been tasked with resolving an issue that's appearing in IE8.
If you check http://funds.ft.com/ETFHomepage.aspx, There's a section called "News". In that section, there's a column called "Most Popular ETFs". This should be the same width as the "Recently Viewed ETFs" column.
For reference, this page is appearing correctly in Firefox. Can somebody please point out what I can do with CSS or (some other means)* to resolve this?
*I know the best way to resolve this issue is to scrap the terrible design and implement it correctly!! :-) -- we're actually doing that right now. It's a big job, so it's taking a long time. In the mean time however, we have to fix the bugs as they appear. Thanks
Update: just to note what I've said to Hristo, "I think the problem is with the table (rather, nested tables) on the left. The table in the center has its width defined by the image, and the table on the right doesn't have an image so it gets crushed"
Well the reason this is happening is because of the url you have under the "Alphaville: Overcoming the Volcker rule, with ETFs" header. Since the url has no whitespace in it, the table tries to give it space. So there are a couple of ways to fix this problem:
Plain text urls aren't very becoming on a webpage (especially when they're not in anchor tags so you can click on them.) Could you update the content so that you don't have a raw url in your content?
If you must be able to handle long lines of text with no whitespace then you need to figure out how to change the layout of the page so it forces the text to either wrap or clip to fit the container. Try playing around with putting "table-layout: fixed" on your tables to force the column widths to be sized based on the table's specifications only (instead of content). Firefox seems to be wrapping on dashes and slashes in the url whereas IE only wants to wrap on the dashes in the url.
I would say your layout is fine, and you just need to fix the content generation so it doesn't include any long plain text urls (option 1 above)
EDIT: If you do decide to go with option 2 above, then look into the css rule "word-break: break-all". It is IE only and it forces the text to break as soon as it reaches the end of the container. Not good for words, but it works for url's. So you couldn't apply this to the whole news table, but you could to just the cell that contains the url.
I've got a table on a webpage, with (say) 8 columns, and it's worked just fine until recently...
A user registered with an email address for a display name (not a huge issue, but the email is massive). Now, as one of the columns is a 'reported by' containing username, any pages with said user on them now have a massive 'reported by' column...
I should also emphasise, the table width was 100% (minus a 'margin') prior to this issue, and it worked just fine).
Is there a clever way to introduce a line break on a '.' or an '#'? Alternatively, how do people normally get around this? Interesting solutions to this annoying problem are welcomed!
When you generate your html table content code, truncate every content extracted from your database to a maximum width. Your truncating function can easily add a tooltip giving the full label.
Alternatively, do this in javascript on pageload. Parse every table cell and truncate the content if it's too large. It's not as nice as server-side truncating, though.
The upside is that you can give the full label in a tooltip, append '...' to let the user know the label is truncated, etc.
Use the table-layout css property.
table-layout: fixed;
http://www.quirksmode.org/css/tables.html#tablelayout
You could set a max-width on the column and overflow:scroll or even overflow:hidden.