I know there are many questions and many answers for this. Everyone has different problems with different solutions for different browsers.
I have tried many solutions from the below URLs. But nothing seems to work.
My output is as follows :
How can I avoid this kind of situation?
I don't want to mess up the table structure.
This table data are filled up dynamically using handlebars.js.
Links I have followed:
Link-1 Link-2 Link-3
.page-break is a div class which I have added after each section and that is working fine.
.Acc_Table is a table class which is shown in output image starting from SEARS/CBSD row and ending with payment history row.
How can I solve this?
Is it possible to close the table before the page break, put in the page break, and reopen the table after the page break?
Or what I wish to display the table on the next page only if it's breaking?
How can I achieve that?
have you checked if the table or if there is a div that is wrapped around it has the display: inline-block; or display: inline; CSS property?
I found out that while I was debugging some code for a printing problem that if the table is inline you get this effect. Try to put display: block or display: static, that works for me
Related
I am trying to duplicate something similar to a windows form toolbar in html. I've created an example of what I am currently working with. Seems great, but when I load it into IE7 the buttons end up going to the next line.
The only other way I can think of is use a table with two columns and text-align the second column. Anyone have any suggestions?
http://jsfiddle.net/nyEw7/
Seems like this question was already asked. I am looking for IE7 workarounds.
Display two divs in a single line filling space - CSS
Use float: left/right. Here's an updated jsfiddle:
http://jsfiddle.net/nyEw7/1/
I'm trying to build this layout. I have this at this time: http://jsfiddle.net/Gh6mB/12/
Whats the best structure to use? I already have some problems using html table and also using only ul, li, and divs.
With tables, I have this: http://jsfiddle.net/Gh6mB/21/ The problem with this solution is that my a:hover effect doesn't work with #detalhes.
With html table, I have this: http://jsfiddle.net/KMjm6/8/ The problem with this version is that I can't put my anchor element as a child of tr. But I want to have each row as a anchor to other page.
I really appreciate any help, because I don't know what's the best way to develop this kind of site. Every strategy I use, I had some problem.
As it's a table of eventos, with one event per line, I resolved to use divs with the display table, table-row and table-cell.
I have a unique design question. Basically I'm writing a chat script and would like to make the layout more uniform. Is it possible to have a unique set of columns per chat line without creating a new table for each line? For instance this is the design I am ideally looking for.
[TimeStamp] Me: I am writing a long message and this text will be
wrapped to the next line. See how the message text
is aligned perfectly when wrapped?
[TimeStamp] Them: When they write a message that requires wrapping
it aligns perfectly for them.
[TimeStamp] OtherPeople: I think this makes the concept clear if it
needs wrapping it aligns for each "poster"
If I create 1 table for all the messages it may make certain columns longer than they should be. I know creating a new table for each new post could accomplish this, just wondering if there is a more "Web 2.0" CSS way of doing this. Any help is appreciated.
Instead of using a table use divs for the poster name and the text.
so:
<div id="everything"><div id="everythingInside">
<div id="timestamp">[timestamp]</div>
<div id="poster">TheCoolGuy</div>
<div id="comment">I"m cooler than you!</div>
</div>
</div>
then use css to display it as a table:
#everything { display: table; }
#everythingInside { display: table-row; }
#timestamp, #poster, #comment { display: table-cell; }
Of course there are other ways using divs and further CSS as well.
Use code, pre, (and var, span, div) and friends. pre and code gives you whitespace-sensitive, fixed-width text, so the columns work just like above (in fact, you could just view source or inspect element). StackOverflow seems to use Google Prettify to do highlighting if you need that.
I am making a table of data that needs to printed out. I want the header to be at the top of each page. SO I am thinking the best way to do this is to repeat the header maybe every 30 columns or so, and break it into sections. But theres still no way to ensure that each section gets printed on its own page that I know of. Does anyone know how to do what I am trying to do? Main concern is just making the header at the top of each page when printing out the table of data.
Thanks!
Make sure your table headers are in the section of the table, then use CSS to style it:
thead { display: table-header-group; }
You may want to check out this article regarding paged media and css. It's a pretty good read and should get you going in the right direction.
Printing a Book with CSS: Boom!
An example using the page break css rules for a table.
#media print
{
table {page-break-after:always}
}
Here's also the w3c references to paged media.
CSS2
CSS3
sigh This one brings back memories. Over the years I have wrestled with browser printing. I finally threw in the towel, and now just send the user a PDF.
I (and my customers) are much happier with the results.
I have an HTML table of data where each cell can have multiple lines of text. When the table is printed, it's possible for a row to be broken up so that some of the data appears at the bottom of the first page and some appears at the top of the next. Is there an equivalent to Word's "keep together" functionality that will prevent a page break from happening within a table row? I would think this would be a common problem, but the only "answer" I could find was hidden on a certain hyphenated web site. :)
Update:
The data will be viewed using IE 7, which it appears does not handle the "page-break-inside" property correctly (if at all). Are there alternatives? Is this something jQuery can help with?
try:
The CSS2-friendly way to do it would be
td { page-break-inside: avoid; }
see the page-break-inside definition
from: http://channel9.msdn.com/forums/TechOff/35322-Keep-with-next-when-printing-HTML-tables/
You may use CSS mediatypes to create printer friendly pages. A simple example is given in the following page. I believe it would help you solving the problem.
http://martybugs.net/articles/print.cgi