I have a table where the columns have a different background set by a colgroup. However, in IE6/7 it's completely ignoring the colgroup background and taking the reset.css background value for the cell (which is background:transparent). How can I fix this without having to go to each cell and manually entering a background value?
HTML
<table id="services-table" border="0" cellpadding="0" cellspacing="0" width="100%">
<colgroup>
<col class="services-oddcolumn" />
<col class="services-evencolumn" />
</colgroup>
<tbody>
<tr>
<td>Column #1, Row #1</td>
<td>Column #2, Row #1</td>
</tr>
<tr>
<td>Column #1, Row #2</td>
<td>Column #2, Row #2</td>
</tr>
</tbody>
RESET(this is placed above the main CSS file)
html,body, table,tr,th,td {background:transparent;} //it's taking this background value for TD and column
CSS
.services-oddcolumn{background-color:#000 !important; width:10%;}
.services-evencolumn{background-color:#fff !important; width:10%;}
EDIT - In the end there's no "clean" fix, I just had to change the reset.css file so table,tr,th,td tags were excluded from background:transparent property
Firstly, congratulations on even knowing about the <colgroup> tag, let alone using it. It's not exactly the most well-known element in the HTML developers arsenal.
Sadly however, one of the reasons it's not very well known is that it is not very well supported, and it sounds like you've hit upon a bug which you're not going to be able to work around.
Have a look at this page: http://marc.baffl.co.uk/bugs.php and search for the word 'colgroup'. You'll find a description of various bugs you'll encounter, along with a table of which browsers support it properly at all. Unfortunately for you, IE6 and IE7 have the word "no" in every column of that table.
You may have a hard time getting this working if you plan to support IE6 and IE7.
[EDIT]
It's worth noting that this lack of support in IE is particularly ironic given that <colgroup> was originally an IE-specific extension back in the IE4 days.
If you want to support older IEs, my suggestion would be to abandon <colgroup> and simply use classes on your <td> elements to achieve the same effect.
Related
This is a theme, HTML or css issue. So please don't leave this when I mention "tiki". I believe it can be solved with a supposedly simple css script.
In our university page, I use the Tiki-wiki platform. Please take a look at the people page. This page consists of multiple tables, in each, there's a group of people listed.
The problem: In the previous version of Tiki, all names in the whole page were aligned without my intervention. Now in the new version of Tiki, you see that all names are not aligned. Every table has its own positioning of the names. This is the case although all tables have exactly the same html tagging and css styling and exactly same image sizes.
The fact that this worked in the previous version of tiki, made me believe that this is nothing but a styling issue, since themes also were updated.
Could you please tell me what I have to do to fix this and make all names aligned? For each table I created my own div with class name "peopletablediv".
If you require any additional information, please ask.
PS: Recreating the whole page isn't a preferred solution.
Just add
.peopletablediv .wikitable {
table-layout: fixed;
}
to your site's CSS and you're done.
In the CSS, you can specify a fixed size for the td conaining pictures :
.wikicell
{
width: 408px; /* or any convenient value here */
}
I'd try to add this to your CSS
.wikitable > tr > .wikicell:first-child{
width: 350px;
}
For an HTML solution, you could add a <colgroup> to each of the tables, just below the <table> tag:
<colgroup>
<col style="width: 380px;" />
<col colspan="2" />
</colgroup>
So the table code might look like this:
<table class="wikitable table table-striped table-hover">
<colgroup>
<col style="width: 380px;">
<col colspan="2" style="background-color:yellow">
</colgroup>
<tbody>
<tr>
<td class="wikicell"><a><img width="120" ...></a>
</td>
<td colspan="2" class="wikicell">Prof. Dmitry Budker <br><a ...>Send e-mail</a>
</td>
</tr>
</tbody>
</table>
Sorry i can't add a comment, not enough "points" still apparently, so this is more of a question than an answer...
Which version of Tiki did you upgrade to and from? (we released 4 new versions the other day) And where is "the people page", sorry, i don't see a link.
If you upgraded from Tiki 12 (say) to 13 or 14 then the whole framework has changed to Bootstrap so some extra custom CSS may well be needed to recreate previous appearances (as you suspected). Can't really tell exactly what without an example.
Hope i can improve my "answer" when i have a little more info, thanks :)
I want to align columns in a table based on a class on the header.
For example, if I have the following table:
<table>
<thead>
<th>Name</th>
<th class="price">Price</th>
</thead>
<tbody>
....
</tbody>
<table>
I know I can use :nth-of-type but sometimes the column will be the 2th, other time will be the 5th and in some places I'll have several columns in the same table align to the right.
Is there a way to accomplish that?
I don't need to support legacy browsers, not even Internet Explorer 9 (if is works on chrome and/or firefox is enough for me)
Just for clarification, I want to align the text in the columns that are in the body associated with the column at the head
No, you cannot style table cells so that styling depends on a class attribute on a column header th. There is nothing in CSS that connects cells that way.
The most robust way to align a column is to generate class attributes on each cell in it. Well, technically, using the HTML align attribute is even more robust.
EDIT: As commented below this only works with a few properties. Text-align isn't included.
Put this in your CSS:
col.price { text-align:right; }
And your HTML:
<table>
<col />
<col class="price" />
<tr>
<td>First TD of first TR</td>
<td>9,95</td>
</tr>
<tr>
<td>First TD of second TR</td>
<td>4,85</td>
</tr>
</table>
Reference:
http://quirksmode.org/css/css2/columns.html
How to align all columns by colgroup? It works with colspan?
Example
This HTML here was tested with Firefox and Chrome, but no browser renderize the center for all expected columns.
<table border="1" width="100%">
<colgroup>
<col style="text-align:center;background-color:red"/>
<col align="center" valign="bottom" style="background-color:blue"/>
<col align="center" valign="top" style="background-color:yellow"/>
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td align="center">$53</td>
</tr>
<tr>
<td><big>5869207</big></td>
<td>My first CSS</td>
<td><small>$49</small></td>
</tr>
</table>
Use this example (copy/paste to) at w3schools.com/tags.
PS: What is wrong with align and valign attributes? Style (by text-align) also not responding.
EDIT
As I said above, I need a solution "by colgroup". It can be also "by colgroup or col tags with style attribute".
My template system need to use colgroup (!), not is valid a solution without colgroup.
My system not need to compatiple with HTML5, it uses something like "XHTML module" (see ex. DTD).
Related questions
Is html <COL align> deprecated? : not the same, because my problem is about XHTML, not about HTML5 (that is not XML and is a "plan for future standard").
If you take a look at http://www.w3schools.com/tags/tag_colgroup.asp you will see that the tag is essentially being phased out as of html5. It is likely that your aligns arent working because your doctype is set to HTML5. In practice it would be not good to use a tag that is going out the door but if you have to use it try setting your doctype to html 4, otherwise I would recommend what Kontakt has said and use the CSS selector :nth-child.
Edit: I looked into it further and did some tests. Set doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Then run it in IE7. You will see it works! It seems many browsers don't support it even if your doctype is set to lower than 4. However good'ol IE7 still renders it. All that can be said is that it is a deprecated tag that doesn't work properly because it became unsupported long ago.
Why not use :nth-child(x) on td elements?
Add following code to your example in HEAD section:
<style type='text/css'>
tr td:nth-child(3) {
text-align:center;
}
</style>
and see changes to your third column.
<table border="1" width="100%">
<colgroup>
<col style="text-align:center;background-color:red"/>
<col align="center" valign="bottom" style="background-color:blue"/>
<col align="center" valign="top" style="background-color:yellow"/>
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<th>3476896</th>
<th>My first HTML</th>
<th>$53</th>
</tr>
<tr>
<th><big>5869207</big></th>
<th>My first CSS</th>
<th><small>$49</small></th>
</tr>
</table>
This at least centers your text in the cells, but like ns47731 its a deprecated tag so can't expect too much.
Well, thanks for all answers and clues. My conclusion, about colgroup, is
The HTML must be standard (XHTML1.0, XHTML1.1 or HTML4.X) compliant;
... but only one browser (Opera) is standard compliant. (MS-IE have no "standard compliant" tradiction, we can ignore IE7 surprising case)
"How to center the columns by colgroup?": following the standards instructions... So, my HTML code (at this question introduction) was right all the time! My mistake was wanting to see it at any web-browser!
Some "correct questions" are (examples):
Why another browsers not implemented the colgroup standard behaviour? At #ns47731's answer we see some clues. Perhaps web-browswer developer are expecting HTML5 and not XHTML2. See also #Alohci comment below.
Why HTML5 and XHTML2 proposals diverge about colgroup? No clues at answers... My supposition: XHTML2 and HTML5 will be not 100% compatible.
Can I negociate with my "template system developer" (a XSLT developer) to add this "XHTML1 standard compliant feature"? :-) Please help me in a lobby for PMC Article Previewer.
I want the second column to be right-aligned and I don't want to apply styles to <td> element. From what I've read <col> is the way to go but it does not work for me:
<table>
<col style="width: 20em" />
<col align="right" style="text-align: right" />
<col />
<tbody>
<tr>
<td>123</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>12345678</td>
<td>189</td>
<td>2</td>
</tr>
</tbody>
</table>
Tried <colgroup> with no luck as well. Any ideas?
p.s.
Latest Chrome, FF5
Apparently only IE and Opera allow align.
Update, col should only have border, background, width & visibility. Has to do with css inheritance. http://ln.hixie.ch/?start=1070385285&count=1 (note, I only skimmed this article but it seemed like a decent read).
How exactly do people who set the standards operate? The obvious thing to do would be have the new way working before removing something from the standard. I am disappointed that this is not easy.
People have been right-aligning text in excel for 15 years yet the latest & greatest HTML 5 can't handle it.
This is more of a rant but the answer is get some people on the standards committee who know what they are doing. I'm sure to be slated for my answer but the fact that the question had to be asked on StackOverflow means it it too difficult to align text in HTML
You can apply a class to the col element, and then style however you want.
<col class="something" />
And
col.something
{
text-align: right;
}
Note that this only seems to be an issue in Internet Explorer versions 7 and lower. Here's a dumbed-down version of my HTML:
<table>
<colgroup>
<col width="20" class="hidden_col" />
<col width="50" />
<col />
</colgroup>
<tr>
<td class="hidden_col"><input type="checkbox" /></td>
<td>Title</td>
<td>Longer Description</td>
</tr>
</table>
Then, I'm including a "print" stylesheet, like this:
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
And that stylesheet includes the following:
.hidden_col {
display: none;
}
Now on just about every other browser, even including IE8, this works fine. On the screen you see that first column, in print preview you don't. But for some reason, IE7 behaves very oddly. It displays things normally on the screen of course, but when you go to print preview in IE7, the only thing that shows is "Longer Description." So in other words, it hides that first column, and it also hides the second column. How do I make this work in all browsers?
You cannot hide a single element of a table, elements inside a table can only use the CSS display properties that start with 'table-', at least they're only supposed to. See this for more information.
Edit: I'd assume your problem is just a glitch from using properties you're not supposed to be using.
Try this: (untested)
td .hidden_col{
display: none;
}
for some reason in Print mode there can be a continuation with CSS styles in print mode on some browser.
What I ended up doing is simply specifying the widths on the cells themselves and not using the <colgroup> anymore at all. Not ideal in my mind, so I'll leave this question open for awhile in case anyone can come up with a better solution, but it did work. Here was my final HTML:
<table>
<tr>
<td width="20" class="hidden_col"><input type="checkbox" /></td>
<td width="50">Title</td>
<td>Longer Description</td>
</tr>
</table>