Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

ColGroup and cell alignment?

Status
Not open for further replies.
Chris1701

Chris1701

MIS
Dec 27, 2004
33
US
I'm trying to use colgroup within a table to save myself some time but I'm running into a browser compatibility issue where it works fine in IE 6 but not in Firefox. Here's a quick example:

[blue]<table>
<colgroup>
<col align="center" width="10%">
<col align="center" width="10%">
<col align="left" width="70%">
<col align="center" width="10%">
</colgroup>
<TR>
<TD>1</TD>
<TD>1</TD>
<TD>This is a test</TD>
<TD>2001-2003</TD>
</TR>
</table>[/blue]

The idea is that the cells for columns 1, 2 and 4 should be centered within the column, without having to resort to adding an align attribute to each individual cell. This example seems to work for IE but not for Mozilla or Firefox. My HTML 4.x book as well as other online sources seem to indicate this is valid but does mention that "align" in colgroup is depreciated and that a style sheet should be used instead. Any ideas?

Thanks!
 
Sort by date Sort by votes
You can add the style with:

<col style="align: center; width: 10%;"/>
<col style="align: center; width: 10%;"/>
<col style="align: left; width: 70%;"/>

etc..


Rich Gautier
 
Upvote 0 Downvote
Hi Rich:
Thanks for the reply, I gave that a try but I still apparently have the same problem in Firefox / Mozilla and that also doesn't seem to work in IE. The code I'm using for my test is:
[blue]
Code: 
<table>
<colgroup>
  <col style="align:center; width: 10%;">
  <col style="align:center; width: 10%;">
  <col style="align:left; width: 70%;">
  <col style="align:center; width: 10%;">
</colgroup>

  <thead>
  <TR>
    <TH align="center"><U>Box</U></TH>
    <TH align="center"><U>Folder</U></TH>
    <TH align="center"><U>Title</U></TH>
    <TH align="center"><U>Date</U></TH>
  </TR>  
  </thead>
  <tbody>
  <TR>
    <TD colspan="4" align="center"><B><U>Test Heading This Section:</U></B></TD>
  </TR>  

  <TR>
    <TD>1</TD>
    <TD>1</TD>
    <TD>Test Item Text</TD>
    <TD>2001-2003</TD>
  </TR>  
</tbody>
</table>
[/blue]

any ideas would be appreciated, I've checked over the header of the page I'm working on since some of the pages on the site use canned style sheets but not this one.
 
Upvote 0 Downvote
The following code works for me in IE6 (but not in Firefox) - so now I'm confused.....

<html>
<body>
<table>
<colgroup>
<col style="text-align:center; width: 10%;"/>
<col style="text-align:center; width: 10%;"/>
<col style="text-align:left; width: 70%;"/>
<col style="text-align:center; width: 10%;"/>
</colgroup>

<thead>
<TR>
<TH style="border: 1px solid #445522;text-align:center;"><U>Box</U></TH>
<TH style="border: 1px solid #445522;text-align:center;"><U>Folder</U></TH>
<TH style="border: 1px solid #445522;text-align:center;"><U>Title</U></TH>
<TH style="border: 1px solid #445522;text-align:center;"><U>Date</U></TH>
</TR>
</thead>
<tbody>
<TR>
<TD colspan="4" align="center"><B><U>Test Heading This Section:</U></B></TD>
</TR>

<TR>
<TD>1</TD>
<TD>1</TD>
<TD>Test Item Text</TD>
<TD>2001-2003</TD>
</TR>
</tbody>
</table>
</body>
</html>



Rich Gautier
 
Upvote 0 Downvote
Firefox doesn't seem to pick up style from the <col> style for the entire column! I tried changing the text to red in the style def for the column, but that didn't work either!

Since you want different styles for each TD, it's going to be a pain in the ass (you'll have to use classed tags, like this:

<TD class="num">
<TD class="text">

and then define the styles for each class:
.num {text-align: center;}
.text {text-align: left;}

I don't know why Firefox won't pick the style up off the column definition in the column group...anyone else?

Rich Gautier
 
Upvote 0 Downvote
I found this helpful page:
that shows how the author uses Javascript to create inline style on all child TD elements for his tables in Firefox/Mozilla. Apparetnly this is a known difference in the DOM handling of COLGROUPs within the browser. The workaround appears to be writing a Javascript that loops through the table and applies the style of the colgroup to all of it's abandoned children. [Site has code you can re-use]

God, I hate the browser wars.

Rich Gautier
 
Upvote 0 Downvote
I've spent a good portion of the day looking into this problem and the best explaination that I found was this:

The CSS flow of inheritance is quite clear and, in all finalized CSS specifications to date (CSS1 and CSS2 at 2001-05-06), the flow of inheritance has no exceptions. Table cell elements are never the children of table column elements or of table column group elements. Even if the document language permitted that ancestry, CSS2 has no way
to accomodate such ancestry. Thus table cell elements cannot inherit properties from their respective table column or table column group elements. If, in a CSS table, all layers above the table columns have transparent backgrounds, the background of the table columns or of the table column groups shows. Table columns and table column groups can
also influence borders in the collapsed borders model, but that influence, again, is not inheritance.
Click to expand...

Though this seems to me that trying to solve the problem with a style sheet you would run into the same problem where the table cell just doesn't inherit the attribute that you want from the class definition? I'm going to go over to the Mozillazine forums and see what info I can dredge up there, I'll report back if I find anything useful
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
413
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
114
lmcate
lmcate
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
312
PeDa
PeDa
jason.lex
  • Locked
  • Question
Bootstrap grid and columns question
Replies
0
Views
63
jason.lex
jason.lex
PSchubert
  • Locked
  • Question
Data in db table cell not displayed in asp table cell -- a CSS issue?
Replies
2
Views
87
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top