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%;
}
Related
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;
}
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.
In my project, I am trying to make the tbody scroll in IE8. I know it can be scrolled by just giving overflow: auto to tbody. But this doesn't work in IE8. To make it work in IE8, the tbody must be given position: absolute (or float: left to both thead and tbody). If I make the overflow: auto work then the widths which I assigned to the th and td in percentages is being ignored. which in turn not letting the tr to occupy the full width in thead and tbody. Hence, there is a irritating space between tr and tbody/thead.
Please test this demo in IE8. (works fine in firefox and chrome)
and here is the code in fiddle.
Here are the strict points which I can't change
Width to td and th must be in percentages.
I can't change HTML markup
It must be solved using just CSS.
Actually, I did solve it with a dirty fix which is as follows
th:after,td:after{ /* only to the last column, first occurence */
content: "...................................................";
visibility: hidden;
}
The above code can also be checked by giving many dots to a specific td/th in developer tools
The above code looks ok but I need to give the :after pseudo selector only to the first row last column th and tr. If I give to every th and tr then the layout is messing up. and also the dots must be increased if the empty space between the tr and tbody is more. Then ofcourse this could be achieved only dynamically which I can't do in my current project.
PS: I maybe doing it completely wrong. I am just sharing my efforts where I reached very close to the result.
I found two ways to solve this problem in IE8.
1) Adding extra td element of width: 0px to tr's of thead and tbody.
IE8 demo
2) Adding a hidden letter to content of after pseudo selector.
tr:after{
content: ".";
visibility: hidden;
}
I added the above in conditional css. because the problem was only in IE8. (I haven't tested in IE9+)
<!--[if IE 8]>
<style>
/* the above css code here */
</style>
<![endif]-->
IE8 demo
I used the latter one because it is simple.
I am trying to get a label to fill a table cell whilst having some sort of padding applied to the label.
I have tried a method I found through my searches but this does not seem to work... here is my CSS:
tr {
height: 1px;
}
td {
height:100%;
}
label {
background-color: #DCDCDC;
display: block;
font-weight:bold;
vertical-align:top;
text-align:right;
padding: 8px 5px 8px 8px;
margin: 1px 3px 1px 0px;
min-width: 120px;
min-height:100%;
height:auto !important;
height:100%;
}
Any help with this would be gratefully appreciated
From the given CSS it looks like there may be browser default padding on the table cells.
td {padding: 0;}
label {display: block; padding: 1em;}
seems to do the trick for me : http://jsfiddle.net/Fb7bS/
But a more complex table and/or inherited styles from elsewhere may add complications.
Hy,
I came over this problem long time ago. It seems that some sort of webbrowsers add a standard padding and margin to tables. How much they add, always depends on the webbrowser. But to overcome this problem you should consider the method of css reseting. What's that ? You simply add a .css file you include in your HTML Page which setts all margins/paddings and other formations done by default to zero. With this you avoid such problems.
There goes the link for CSS Reset: http://meyerweb.com/eric/tools/css/reset/
Well, in older browsers, a label cannot be set as a block level element. You could try placing a div within the label and transferring the label's styles to the div, and see if that fixes your issue.
Though also for height: 100% to work, the element must be absolutely positioned, and the parent element relatively positioned, but in some browsers table elements like td can't be relatively positioned, either. Also unless the td is meant to fill the entire length of the screen vertically, the height: 100% on both elements is unnecessary anyway.
I removed some of the "unnecessary" code and changed your format a bit here, though I'm not sure exactly what you wanted, so it might turn out to not be so unnecessary and that something else was just missing: http://jsfiddle.net/mGykJ/1/
Could you see if that's more like what you had in mind? Though if you could post your HTML, that would be helpful.
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