6 replies [Last post]
EsorOne
Offline
Regular
Last seen: 9 years 23 weeks ago
Timezone: GMT+2
Joined: 2005-12-09
Posts: 30
Points: 9

Hello there,

I have a table styled element in HTML adn CSS and this does work great.

But now I would like to have another but diferred styled table in the same page. And again I'm running through some problem.

The problem is that the second element inherited the style from the first.

I tried to give the second style element some classes but this doesn't work.

I can't find out why but I think I use the classes wrong.

Thx in advance

/* CSS voor tables HTML */
body {
  font: 12px Verdana, Arial;
  color: Black;
  background: #C0C0C0;
  width: 80%;
}
 
#container {
  background: #98859C;
  width: 95%;
  padding: 10px;
  margin: 5%;
}
 
table {
  font: normal 12px Tahoma, Arial, sans-serif;
}
/* Tabel heading (BOLD by default) and table data.   */
 
th, td {
  border: 1px solid #33FF33;
  padding: 3px;
}
 
th {
  text-align: left;
  color: #535300;
  background-color: #999933;
  border-color: #CCC #666 #000 #CCC;
}
 
td {
  background-color: #DDDDDD;
  border-style: solid 1px;
  border-color: #FFF #AAA #666 #FFF;
}
 
#firsttable {
  border: 0;
  font: normal 12px 'Lucida Grande', Verdana, sans-serif;
}
 
.firsttd, .firstth {
  padding: 3px;
}
 
.firstth {
  text-align: left;
  border-bottom: 1px solid #000;
}
 
.firsttd {
  border-bottom: 1px solid #666;
}

HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<link rel="stylesheet" type="text/css" href="CSS/screen/table.css" />
  <title>Table</title>
</head>
 
<body>
 
<div id="container" >
 
 
 
 <table>
  <tr>
    <th>Team</th>
    <th>1998</th>
    <th>2002</th>
  </tr>
  <tr>
    <th>England</th>
    <td>Second Round</td>
    <td>Quarter Finals</td>
  </tr>
  <tr>
    <th>France</th>
    <td>Winners</td>
    <td>Group stages</td>
  </tr>
</table>
 
<br /><br />
 
 <table id="firsttable">
  <tr>
    <th class="firstth" >Team</th>
    <th class="firstth" >1998</th>
    <th class="firstth" >2002</th>
  </tr>
  <tr>
    <th class="firstth" >England</th>
    <td class="firsttd">Second Round</td>
    <td class="firsttd">Quarter Finals</td>
  </tr>
  <tr>
    <th class="firstth" >France</th>
    <td class="firsttd">Winners</td>
    <td class="firsttd">Group stages</td>
  </tr>
</table>
 
 
 
</div>
 
 
 
 
</body>
 
</html>

Screenshot:

EsorOne
Offline
Regular
Last seen: 9 years 23 weeks ago
Timezone: GMT+2
Joined: 2005-12-09
Posts: 30
Points: 9

SOLVED

I now know what the problem was.

Everything that I already declared in e.g. "td" will be inherited in "td.firsttd"
So if there was a code like:

td {
background-color: #DDDDDD;
border-style: solid 1px;
border-color: #FFF #AAA #666 #FFF;

And I didn't want to have a background, I had to declare

td.firsttd {
background-color: transparent;

}

I hope that will help somebody!

David Laakso
David Laakso's picture
Offline
Enthusiast
US
Last seen: 13 years 21 weeks ago
US
Joined: 2008-07-18
Posts: 265
Points: 0

Sounds reasonable (providing

Sounds reasonable (providing you validate the CSS). OTOH, it could be done simpler, not all the classes, and no tag needed-- something like this...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<title>kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</title>
 
<style type="text/css">
body { font: 12px Verdana, Arial; color: Black; background: #C0C0C0; width: 80%; }
#container { background: #98859C; width: 95%; padding: 10px; margin: 5%; } 
table { font:normal 12px Tahoma, Arial, sans-serif; } /* Tabel heading (BOLD by default) and tabledata. */ 
th, td { border: 1px solid #33FF33; padding: 3px; } 
th { text-align: left;color: #535300; background-color: #999933; border-color: #CCC #666 #000 #CCC; } 
td {background-color: #DDDDDD; border-style: solid; border-width: 1px; border-color: #FFF #AAA #666 #FFF; }
.wrapper {margin-bottom: 30px;}
.c1 { border: 0; font: normal 12px 'Lucida Grande', Verdana, sans-serif; }
.c2 th { background: fuchsia; color:#fff; } 
.c2 td { background: red; color:#fff; } 
</style>
</head>
 
<body>
 
<div id="container">
 
<div class="wrapper c1">
<table>
<tr>
<th>Team</th>
<th>1998</th>
<th>2002</th>
</tr>
<tr>
<th>England</th>
<td>Second Round</td>
<td>Quarter Finals</td>
</tr>
<tr>
<th>France</th>
<td>Winners</td>
<td>Group stages</td>
</tr>
</table>
</div>
 
<div class="wrapper c2">
<table>
<tr>
<th>Team</th>
<th>1998</th>
<th>2002</th>
</tr>
<tr>
<th>England</th>
<td>Second Round</td>
<td>Quarter Finals</td>
</tr>
<tr>
<th>France</th>
<td>Winners</td>
<td>Group stages</td>
</tr>
</table>
</div>
</div>
 
</body>
</html>

EsorOne
Offline
Regular
Last seen: 9 years 23 weeks ago
Timezone: GMT+2
Joined: 2005-12-09
Posts: 30
Points: 9

Thx I think your solution

Thx :thumbsup:

I think your solution is better. This is what i was looking for, but i didn't know how-to...

It's exactly what i tried to accomplish..

One question about your solution. Does this mean that it is possible to declare 2 classes at the same time like:

Is it the:

.wrapper {
margin-bottom: 30px;
}

and the

.c2 th {
background: fuchsia;
color: #fff;
}

.c2 td {
background: red;
color: #fff;
}

Together?

Thx again..

EsorOne

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 1 week ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You can declare two or more

You can declare two or more class names, allowing you to set grouped class rules on an element.

This thread does appear to follow on from your other one in that it is intrinsically the same issue which is one of understanding how you may use selectors, combinators, classes/IDs When you have this sorted out it would be wise to spend a little time reading up on this area as it's a vital and fundamental part of applying rules to markup.

When you have two similar elements repeating and want to have slightly different rules for each then you need to clearly name each also work out any common properties as these may be described in such a way that the rulesets apply to both; any separate rules you then apply by making the distinction that the rules only apply if they have a named parent, in this case I would name each table with a unique ID (I would always ensure that major elements such as this were either given an ID or class) this ID ensures that you can safely apply rules only to elements that have that named element as their parent or antecedent.

Have you had a look through the 'how to' section as, if memory serves, there is a little topic on selectors which might be useful.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

EsorOne
Offline
Regular
Last seen: 9 years 23 weeks ago
Timezone: GMT+2
Joined: 2005-12-09
Posts: 30
Points: 9

Clear And indeed this

Clear Smile

And indeed this thread does follow on from my other one, but it is a different exercise and my brain is driving me crasy...

I having this question because I do lots of reading and sometimes (like this example) I try to exercise. But at some stage I can't manage it by myself and I need your guys for some help.

I'm reading every letter from the book:
Beginning CSS Web Development from Novice to Professional Aug 2006.
But because of the language barrier. I don't understand everything for the 100%

Quote:

Have you had a look through the 'how to' section as, if memory serves, there is a little topic on selectors which might be useful.

I WILL!

Thx

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 1 week ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Understood; it can be

Understood. It can be helpful to seek further clarification on matters. That you are reading up is good, and this aspect of CSS is not always the easiest to get to grips with.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me