Suppose I have something like this:
<table class="myTable">
<colgroup span="2" /><colgroup span="2" />
<tr><td>........</tr>
And so on...
Then on the stylesheet:
table.myTable colgroup
{
border-right: solid 5px #ffffff;
}
The point being that I want some space to separate colgroups in my table.
It's working fine in Firefox and IE8. I already read everywhere that IE7 does not implements borders for colgroup, but here is a call to your imagination and creativity, does anyone have an idea of how I could achieve a similar result in IE7, without adding a class to every cells or generating empty cell...
Here's an exemple of the result in Firefox 4 : http://imageshack.us/photo/my-images/853/capturezz.png/
The headers generated can be litterally of any form, some case are really complex. This is why the colgroup solution is interesting, since it is quite simple to calculate the needed span.
Every suggestions will be appreciated.
Don't have much experience in IE7, but this might work:
You can check if it is possible to set a background-image. And align that image (with the desired color) to the right side of the cell, making some kind of a fake border look.
In chrome setting a border on a colgroup doesn't work eighter. Setting a background-image does work.
Greetz,
XpertEase
In order to use the border property in tables, you must set the following rule. If not you wont get them
table {
border-collapse:collapse;
}
Then you will get borders working as you pretend
Related
My goal is for all cells in a table to have a background color except ones with the class 'transparent'. Here is some sample code (corresponding jsfiddle):
<style>
td { background-color: red }
td.transparent { background-color: none }
</style>
<table>
<tr>
<td>foo</td>
<td class="transparent">bar</td>
</tr>
</table>
Why doesn't the td.transparent cell follow the td.transparent css rule? When I inspect the element the rule is there, but it is getting overridden by the td rule, which seems to break normal css specificity rules.
I can get what I want by using rgba(0,0,0,0) instead of none, but rgba is not supported in IE8 and I would like to avoid using an ugly hack if I could.
I'd also like to simply understand why this isn't working the way I expected.
Thoughts?
The value needs to be a valid color, and none is not a valid color. Instead you can use transparent (similar to rgba(0,0,0,0) but more widely supported). If that's no good you can always go with white or use a more specific rule for the red background instead.
For what it's worth: you could replace background-color:none with background: none and it will work.
None isn't a valid color, instead use transparent.
jsFiddle demo
td.transparent {
background-color: transparent;
}
Alternatively, you could also use the following:
The reason this works is because it is stating there should be no background in general. It is not referring to a specific color as in the first example.
td.transparent {
background: none;
}
jsFiddle using this method.
As a side note, usage of CSS3 colors (rgba) is not 100% supported. Reference here: http://caniuse.com/css3-colors
In addition, I would like to say that all of this could be avoided if you didn't set an inital background-color in the first place. There would then be no reason to overwrite the original style if this were the case.
The proper syntax (for CSS2.1) is:
background-color:transparent;
http://www.w3.org/TR/CSS2/colors.html#propdef-background-color
Another alternative is to reset the property to the value from the parent element (inherit) or to the default value set by the browser for the property (initial)
In my particular case where I needed to override the background color, background-color: initial; is what fixed the issue.
Pretty weird, fine in all other browser but in IE7 the background colour is not showing the css for the table is as follows.
#warrentyFormTable tr.error { background: #ffe2e2; }
If you use some kind of CSS Reset and the background-property is set to transparent for the td-element, this causes IE6/7 to trouble.
Try only resetting these things you really need and remove td from that list.
Further information on this site:
http://www.sitepoint.com/forums/showthread.php?683598-Table-Cell-Background-Color-Issue-with-IE7-and-IE6%3E
It just wont manage TR styling
Try this :
#warrentyFormTable tr.error td {background: #ffe2e2}
carry on
Throughout my website, I have many <table>s in which there is a specific column we want to have squeezed to it's minimum possible space (without having it's text wrapped). Other sibling cells share the rest of the space automatically.
I'm using the following trick and it works in all browsers except IE7-. (At this time I actually only care about IE7)
table {width:100%;}
table td.min-col {white-space:nowrap; width:1px; }
jsFiddle link: http://jsfiddle.net/vm8gc/23/
If you try this in IE7 you will notice it acts differently (not expected behavious). -- see screen capture below.
Can anyone think of a fix for IE7 to achieve this?
Attachments:
All other browsers:
IE7:
CSS 2 Version
For some reason Internet Explorer seems to ignore white-space on TDs. Best way around the problem is to use a span inside the TD.
<td><span style="white-space: nowrap;">This should not wrap</span></td>
As usual IE doing it's own thing ;)
For info on white-space support, see here:
http://www.quirksmode.org/css/whitespace.html
PRE Version
An alternative which would have better support with older browsers would be to do the following:
<td><pre>This will not wrap</pre></td>
And then have your pre element set-up to either be styled in the same way as your normal text or enable it to inherit style from it's parents (inheriting probably has less support that just specifiying the style):
td pre { font-family: inherit; font-size: inherit; color: inherit; ... }
I have been reading these forums for some time, but this is my first question :)
The question is related to styling tables. If you look at my page in Chrome, at the bottom left of my table and the bottom left <td> tag, I was able to hide the borders the using visibility:hidden; But, in Firefox, the <td> still shows these borders. I have found that Firefox doesn't like the visibility attribute.
http://allramhosting.com/new/shared-3/
.hide
{
visibility: hidden;
}
<td class="hide"> </td>
Does anyone know a way around this that will work in multiple browsers? I also tried border-color:white; in the <td> on <tfoot> and that almost works; it keeps the very bottom border line visible.
Use
.hide { border-style: none; }
or
.hide { border: none; }
on your tds or
.tableClass{ border: none;}
if your table has class tableClass.
Have you tried setting the border-width to zero?
Have you tried:
display:none
I find that works to hide things far better without side effects.
As an FYI I have found issues with proper size rendering when you start hiding "parts" of tables. Meaning that I have seen the browser (including chrome) not render the rest of the document properly or hang things off the end of the document when you hide parts of a table. If you hide the whole table it seems to figure that out fine.
I once worked around with the following trick:
Depends upon what you want to achieve in styling, but generally, setting relevant element's (color/background-color/border-color(in this case)) to 'transparent' usually works across browsers.
hope this helps someone.
Is it ok to use cellpadding="2" cellspacing="2" in <table>? Or are these not recommended by W3C and not right according to web standards?
What are alternatives in CSS?
Update: and is it also ok to use <td align="right" valign="top">?
My question is in terms of separation of content and presentation and W3C recommendations.
Update:
According to this chart in <table> only align and bgcolor are not allowed in Strict version. So is it ok to allow other properties of <table>?
alt text http://shup.com/Shup/293811/11021055643-My-Desktop.png
No, the attributes are not officially deprecated but they are generally frowned upon, since you should use CSS for presentation.
For cellpadding you can easily replace it with padding in CSS:
table.classname td {
padding: 4px;
}
For cellspacing, first decide if it's really necessary. If you don't have any borders on the table cells, or you don't want spacing between the borders of each cell then it isn't. (Personally I think cell spacing looks bad design-wise, but it may be useful in some circumstances.)
It's quite nice to do this:
table {
border-collapse: collapse;
}
Then each table cell shares the border with its neighbour, meaning you can add, say, 1px top and bottom borders and you just get 1px separating each row.
To separate borders, however, you can use this CSS, though it probably doesn't work in IE6.
table.data td {
border-collapse: separate;
border-spacing: 4px;
}
While it's technically fine, it is strongly not recommended.
Imagine if your site had many tables across many pages and you wanted to change the padding or the spacing for one reason or another. Well, you would have to go through your entire site and make the changes.
Or you can use CSS and change your entire site by changing a line of code in one location. This is not only far more efficient, but its easier, helps you avoid mistakes, and keeps you consistent.
<style type="text/css">
table td { padding:10px; margin:10px; }
</style>
If you want to use some tables with padding and margins and others without, you can create classes in your CSS by adding a "." before a name of your choice:
<style type="text/css">
.myTable td { padding:10px; margin:10px; }
</style>
<table class="myTable> etc...
Note that class names are case sensitive. There are also many other attributes you can have fun with like border, background-color, etc...
In short, while cell-spacing and cell-padding attributes are not deprecated, its far better to use CSS for ease and consistency across your site.
<style type="text/css">
table.padded-table td {
padding:10px;
}
</style>
The cell-padding and cell-spacing properties are still fully supported. Although some people will tell you to do it with CSS setting padding and margin on the table cells, this is still the easy way to have it applied to every cell in a table.
If you want a list of properties and which ones are deprecated, I find w3schools to be the most reliable source of information.
w3schools: td tag
w3schools: table tag