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!

Cannot set border styles via class setting in table 1

Status
Not open for further replies.
pkskytektip

pkskytektip

Programmer
Apr 3, 2010
21
US
I am trying to set the left-border so that it shows with a solid border on the left of only certain columns set with a certain class. But I am getting no settings being shown.

Here is a simple example of what I am trying to do:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.CC0 {
	background-color:#CCCCFF;
}
.CC1 {
	background-color:#9999CC
}
tr.CC0, tr.CC1, col.CC0, td.CC0 {
	border-left: solid #FF0000 3px
	}
td {
	/*This works on all the cells
	border-left: solid #FF0000 3px*/
	}
</style>
</head>

<body>
<table width="50%" cellspacing="0">
  <tr class="CC0">
    <td style= "border-left: solid #FF0000 3px" colspan="2">&nbsp;</td>
    <td colspan="2">&nbsp;</td>
  </tr>
  <tr class="CC1">
    <td colspan="2">&nbsp;</td>
    <td colspan="2">&nbsp;</td>
  </tr>
				<colgroup span="2">
							<col class="CC0" />
							<col class="CC1" />
			  </colgroup>
				<colgroup span="2">
							<col class="CC0" />
							<col class="CC1" />
			  </colgroup>

  <tr>
    <td style= "border-left: solid #FF0000 3px">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td style= "border-left: solid #FF0000 3px">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

Copy and paste this into a new HTML page and you should see background colors for certain rows and certain columns. Notice that this class setting does not work:

Code: 
tr.CC0, tr.CC1, col.CC0, td.CC0 {
	border-left: solid #FF0000 3px
	}

But similarly set inline style settings do work. And of course the background setting for the two classes .CC0 and .CC1 also work fine.

Why don't the element-class combination settings work? What is the best way of getting the desired results without using inline settings?
 
Sort by date Sort by votes
Your CSS does not match up to your html.

This:
Code: 
tr.CC0, tr.CC1, col.CC0, td.CC0 {
    border-left: solid #FF0000 3px
    }

Would apply to 4 things. Table rows or TRs with a class CC0, TRs with a class of CC1, Columngroup with a class of CC0 and table cells or TD's with a class of CC0.

[ol][li]Table rows are invisible constructs, so borders cannot be applied to them. [/li]

[li]You don't actually have a colgroup to which the col style would apply.[/li]

[li]And there are no actual table cells with a class defined let alone one of CC0[/li][/ol]
So nothing there is actually being applied.
Perhaps what you want to do is to apply the borders to cells (TDs) inside rows (TRs) with a class of CC0 or CC1

I which case it would be:

Code: 
tr.CC0 td, tr.CC1 td{
    border-left: solid #FF0000 3px
    }

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Upvote 0 Downvote
Thank you for those insights and the code you provided works fine.

1.Table rows are invisible constructs, so borders cannot be applied to them.
2.You don't actually have a colgroup to which the col style would apply.
3.And there are no actual table cells with a class defined let alone one of CC0
Click to expand...

I'm still confused about the role of the columns and column groupings. I'm not sure what you mean when you say "You don't actually have a colgroup to which the col style would apply." I still need to apply border settings to the td cells under the column groups.

Is there any way to apply left or right border settings to columns using a column in a column grouping? It doesn't look like a selector issue.
 
Upvote 0 Downvote
I've done a quick Google of CSS colgroup and find that there a servere limitations as to what can be styled under col's. It so happens that background color is one. Width is another.

Can anyone confirm or deny that? Any tips as to a solution?

I understand now that more than one class can be listed in an attribute and so I might add a border style class to be applied in my actual HTML page where there is already a class being applied in the td cells.
 
Upvote 0 Downvote
Sorry, I missed the col groups there, in which case you should be able to get it to work by simply adding the rules=group to the table. This will allow borders to be applied to the column groups as defined.

Code: 
<table width="50%" cellspacing="0" [red]rules=group[/red]>

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Upvote 0 Downvote
Yes, thanks for that. You can now set the borders for the columns with the rules attribute. But I was confused for a bit and it really took some time for it to sink in that you cannot control the cells in the individual columns. You can only place borders around the entire columns, this is not a cell attribute. For example, I also tried to but border-bottom styles within the columns using the colgroup, and it didn't work for the individual cells.

I might also mention that "rules" applies to tables only, and has other settings not related at all to colgroups. And also the "rules" setting will also put borders around thead, tbody and tfooter areas in a table. "Rules" refers to lines and not rules of settings, like priority or application.
 
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
418
spamjim
spamjim
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
723
Chris Miller
Chris Miller
PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
502
spamjim
spamjim
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
644
Mike Lewis
Mike Lewis
PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
385
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top