I am trying to avoid having page breaks inside of rows for my HTML tables that may go past one page. I am using Internet Explorer Print Preview and also BCL EasyPDFSDK to convert to PDF to test this. I applied the following CSS styling in various combinations to the <td> elements but for each one I was getting an undesired result:
td {
page-break-inside: avoid !important;
white-space: nowrap;
overflow: hidden;
margin: 4px 0 4px 0;
}
I believe the page-break-inside: avoid !important is working, but only on the <td> level. For example, I will see a <tr> that has one <td> on the end of the first page with all of the text intact, but the following <td> tags would be on the next page with all of their text intact.
I didn't think you were supposed to apply formatting to <tr> so I'm unsure how to go about fixing this.
Should I apply the CSS to the <tr> or is there another way to achieve this?
Thanks for the help!
Turns out I needed to collapse borders on the table element and reduce my padding to only 1px using
table { border-collapse: collapse; }
td {
page-break-inside: avoid !important;
white-space: nowrap;
overflow: hidden;
padding: 1px;
font-size: xx-small;
}
I also set the font-size to xx-small just in case that was causing an issue. The issue seemed to primarily be resolved when I collapsed borders, so it makes me wonder if the table was having issues splitting the rows because of that.
Cheers!
EDIT:
Since dealing with this issue, I have found out that the row splitting is handled much better in newer web browsers. I highly recommend updating IE to at least 11 if you are experiencing this issue.
I just added the below css to my #media print and it worked!!!
None of the solutions applied to td, th, tr worked
table {
page-break-inside: avoid !important;
}
Related
For some reasons, I have to apply inline td width in a table, see lower part of table at this page using Chrome at this page
Firefox and IE seem to render this well, however, Chrome is rendering the width differently. Applying left and right paddings on tds, seem to have the same issues with Chrome.
Any ideas? Again, I need to do this inline. Global CSS seems to do render more issues with the site globally.
Try this
Remove width="" for all td's
and apply below css
CSS
.dataTables_wrapper table td {
padding: 0.5em 0 0em 0;
}
.view-footer td:first-child,
.dataTables_wrapper table td:first-child {
width: 120px;
}
The problem is allocating space for table column varying each browsers when you have not assign any width. so assign some width to your td will resolve the problem. Just add the following class in CSS to fix this problem.
#datatable-1 tr td:first-child
{
width:1%;
}
With CSS, I'm trying to add 5px padding to tables which do not have the border attribute set to "0". To do this, I'm able to select these tables like this, and test it by making the background color of them red:
table:not([border="0"]),table:not([border="0"])>tr,table:not([border="0"])>tr>td
{
background-color: red;
}
Also, this works to make all tables have padding:
td,th
{
padding: 5px;
}
However, I only want tables with borders to have padding, and this does not work:
table:not([border="0"]),table:not([border="0"])>tr,table:not([border="0"])>tr>td
{
padding: 5px;
}
Does anyone see an issue here? Thanks in advance.
EDIT: I see the code I posted above actually works, I didn't realize that I left out code that broke it, but this is what I tried to get working:
table:not([border="0"]),table:not([border="0"])>tr,table:not([border="0"])>tr>td
{
border: 1px solid rgba(0,0,0,.25);
border-collapse: collapse;
padding: 15px;
}
The border-collapse:collapse; property seems to be causing this problem. Is there any way to have single borders between cells and padding at the same time?
A <table> always has a <tbody> if you don't specify one explicitly in the HTML.
(It would be different in XHTML, but this is HTML, not XHTML.)
Solution: also specify the tbody in the CSS selectors.
table:not([border="0"]), table:not([border="0"])>tbody>tr, table:not([border="0"])>tbody>tr>td
{
padding:15px;
}
See fiddle
By the way, you could remove the middle selector (ending in tr) from the rule, because it doesn't do anything. You can't give padding to table rows.
You say it does work with the first example in your post, but that isn't entirely true. Only the first selector works, giving the whole table the red background, and the other two are ignored, so the cells remain transparent.
Oh, and it's best to not use the border attribute any more. There was a dispute between the WHATWG and the W3C about whether it was still valid, but they finally agreed that it was obsolete.
I'm using vBulletin to style a forum which primarily uses tables to style the site. How would I go about using padding on a tbody to space the content away from the border?
Here you can see a picture of my main site where the content is pushed 5px away from the border:
Whereas on vBulletin, adding padding on tbody doesn't push the content away:
Method 1
You have a couple different options:
tbody:before {
content: '';
display: block;
height: 20px;
}
Adding this basically "inserts" content before the end. It's sort of a "quick-n-dirty" fix.
Method 2
Another option is giving your table a border-collapse: collapse and then giving your tbody a border value:
table {
border-collapse: collapse;
}
table tbody {
border-right: 20px solid transparent;
}
Both of these methods have drawbacks, however. The before selector might not work in IE7, and requires a !DOCTYPE to work in IE8. The second method can sometimes be a bit touchy, depending on the rest of your css. Be sure to have a !DOCTYPE
Add an empty col and/or row with padded cells.
Adding :before content to tbody may not have the effect you're looking for. It may not push borders around as you think or even other cells or col or row groups. In general do not try to put anything outside a cell in a table, you're asking for trouble.
I have the following html
<table>
<tr>
<td>
<div class="container">
<img src="http://.../baking-potato.jpg" />
</div>
</td>
</tr>
</table>
The td cell is not wrapping "perfectly" the div+img content: as you can see from this fiddle, there's a margin in the bottom of the cell, highlighted by the black background.
How can I get rid of that unwanted margin? I tried the following css properties
table{
border-spacing: 0 px;
border-collapse: collapse;
}
but nothing changed..
Thank you in advance
Add the following CSS
.container img { display:block; }
JSFiddle Updated
Reason:
This happens because an <img> is an inline element, and therefore leaves space for text characters like p and y for example, because it is inheriting the line-height
Not sure why this occours here. I have tried several things. The following CSS seems to work for me:
.container img {
margin-bottom: -5px;
}
However it's a hack and therefor not a really good practise in my opinion. But sometimes you just don't get around using hacks...
Not really related to this case, but for someone having issue with <pre> wrapperd in <td>, you may need to set margin: 0 to remove the space. This is the case I met with when using codeblock in hugo.
Here is a screenshot showing the problem:
Here is the CSS I am using:
#board table {
background: #eef0ff;
border-spacing: 0px;
border: 1px solid #475476;
}
#board td {
height: 20px;
width: 20px;
border: 1px solid #cfd7ee;
}
How can I makes the cells the same size in diferent browsers? Does anyone know why Opera and Firefox tighten the cells?
You will need to use a CSS reset, or set some of your own defaults for table margins, padding and other elements in your design.
A CSS reset (either yours or a third party one) will ensure all browsers have a similar starting point, regarding styles, as the different browsers do not have the same style defaults on different elements.
Additionally, as #thirtydot says in his answer, some browsers will ignore the height of a completely empty table cell, such as <td></td>. To ensure it is not ignored, you should add some content to these cells, a good choice being the non break space - , in this manner: <td> </td>.
Your cells are all empty, right? <td></td>?
One fix that will definitely work is to stick an in each cell: <td> </td>.
For some other ideas, see: CSS table, table-cell height issue in Firefox
First reset your HTML code default properties like padding, margin, height, width.etc.., then you apply your style to work
Better reset css is Eric Mayer's