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.
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;
}
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.
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
I have tried everything I can think of in css in order to get a background color to span an entire table row (<tr> tag) But I keep getting a white border around each cell.
CSS (excerpt):
/*alternating row*/
table, tr, td, th {margin:0;border:0;padding:0;}
tr.rowhighlight {background-color:#f0f8ff;margin:0;border:0;padding:0;}
HTML (excerpt):
<tr class="rowhighlight"><td>A</td><td>B</td><td>C</td></tr>
It just does not want to cooperate. Thanks for helping...
table{border-collapse:collapse;}
I prefer to use border-spacing as it allows more flexibility. For instance, you could do
table {
border-spacing: 0 2px;
}
Which would only collapse the vertical borders and leave the horizontal ones in tact, which is what it sounds like the OP was actually looking for.
Note that border-spacing: 0 is not the same as border-collapse: collapse. You will need to use the latter if you want to add your own border to a tr as seen here.
Try this:
.rowhighlight > td { background: green;}
Removing the borders should make the background color paint without any gaps between the cells. If you look carefully at this jsFiddle, you should see that the light blue color stretches across the row with no white gaps.
If all else fails, try this:
table { border-collapse: collapse; }
tr.rowhighlight td, tr.rowhighlight th{
background-color:#f0f8ff;
}
Firefox and Chrome are different
Chrome ignores the TR's background-color
Example: http://jsfiddle.net/T4NK3R/9SE4p/
<tr style="background-color:#F00">
<td style="background-color:#FFF; border-radius:20px">
</tr>
In FF the TD gets red corners, in Chrome not
Have you tried setting the spacing to zero?
/*alternating row*/
table, tr, td, th {margin:0;border:0;padding:0;spacing:0;}
tr.rowhighlight {background-color:#f0f8ff;margin:0;border:0;padding:0;spacing:0;}
This worked for me, even within a div:
div.cntrblk tr:hover td {
line-height: 150%;
background-color: rgb(255,0,0);
font-weight: bold;
font-size: 150%;
border: 0;
}
It selected the entire row, but I'd like it to not do the header, haven't looked at that yet. It also partially fixed the fonts that wouldn't scale-up with the hover??? Apparently you to have apply settings to the cell not the row, but select all the component cells with the tr:hover. On to tracking down the in-consistent font scaling problem. Sweet that CSS will do this.