I've gone blind... CSS and tables...

I have this simple code where I'm trying to style a table. It goes well until I try to apply an alternate class (spacerow) to 3 of the table rows - this gets ignored - and that really bugs me - I know the answer is simple but I can't see it - I've gone blind on this one... anyone??

The use og the TH tag is a due to the same problem - couldn't get an alternate class to work so the th tag saved me... but then the problem came back when I needed a special row :(

UPDATED: Just simplified the code to focus on the problem!!!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
      <title>Untitled</title>
  <style>
    .signuptable {
      table-layout: fixed;
      margin: 0px;
      width: 743px;
      border-collapse: separate;
      border-spacing: 3px;
    }
   
    .signuptable td {
      background-color: #f4f5f6;
      padding: 5px;
    }
   
    .signuptable th {
      background-color: #e3e6e7;
      padding: 5px;
      font-weight: normal;
      color: #4c5d67;
      text-align: left;
    }
   
    .signuptable tr.spacerow {
      background-color: #ff0000;
      padding: 0px;
    }
  </style>
</head>

<body>

        <form Action="signup.asp?cmd=newuser" Method="Post" Name="frmSignUp">
        <table class="signuptable" align="center">
       
          <tr>
            <td width="175">Fulde navn:</td>
            <td width="330">
              <INPUT TYPE="TEXT" maxlength=50 NAME="fullname" VALUE="">
             
            </td>
            <th width="215">
              Dit navn! Det er dette navn der vil blive vist på EASYBLOG.dk.
            </td>
          </tr>

          <tr class="spacerow">
            <td colspan="3"><img src="images/blank.gif" alt="" width="740" height="2" border="0"></td>
          </tr>
       
          <tr>
            <td colspan="3" style="padding: 5px; padding-bottom: 0px; padding-top: 15px;" align="center"><INPUT TYPE="submit" NAME="OK" VALUE="Opret bruger"></td>
          </tr>
         
        </table>
        </form>

</body>
</html>
logicmediaAsked:
Who is Participating?
 
JezcentralConnect With a Mentor Commented:
Ha! Okay, one last point:

  .signuptable tr.spacerow td {
      background-color: #ff0000;
    }

If you put this in your syylesheet, this should override the current TD settings whenever you apply class="spacerow" to the TR.

Jezcentral.
0
 
cdemirCommented:
hi, do you mean this? (added : style="padding: 0px")

          <tr class="spacerow">
            <td colspan="3" style="padding: 0px"><img src="images/blank.gif" alt="" width="740" height="2" border="0"></td>
          </tr>
0
 
JezcentralCommented:
BTW, you've closed of the <th width="215"> with a </td> in your code.

Jezcentral
0
Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

 
JezcentralCommented:
The problem is that the TR may have a style, but the TD's have a background-color of their own, rather than inheriting it from the TR. You can't see through the TD style to see the TR style, although it is there, and can be seen if you get rid of the TD background-color settings.

Jezcentral
0
 
logicmediaAuthor Commented:
jezcentral,

Well you are right - if I move the spacerow to the TD it works... It just puzzles me since I remember seeing the method in a book where they did apply it to every second TR in order to make the table more readable. I think! Gonna check it when I get home.


    .signuptable td.spacerow {
      background-color: #ff0000;
      padding: 0px;
    }


          <tr>
            <td colspan="3" class="spacerow"><img src="images/blank.gif" alt="" width="740" height="2" border="0"></td>
          </tr>
0
 
dharmeshmaniarConnect With a Mentor Commented:
your css class
.signuptable td {
      background-color: #f4f5f6;
      padding: 5px;
    }

overrides the class on your tr.

Please make this changes in your css and html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
     <title>Untitled</title>
  <style>
    .signuptable {
      table-layout: fixed;
      margin: 0px;
      width: 743px;
      border-collapse: separate;
      border-spacing: 3px;
        background-color: #f4f5f6;
    }
   
    /*.signuptable td {
      background-color: #f4f5f6;
      padding: 5px;
    }*/
   
    .signuptableth {
      background-color: #e3e6e7;
      padding: 5px;
      font-weight: normal;
      color: #4c5d67;
      text-align: left;
    }
   
.spacerow{
background-color: #FF0000;
}
  </style>
</head>

<body>

        <form Action="signup.asp?cmd=newuser" Method="Post" Name="frmSignUp">
        <table class="signuptable" align="center">
       
          <tr>
            <td width="175">Fulde navn:</td>
            <td width="330">
              <INPUT TYPE="TEXT" maxlength=50 NAME="fullname" VALUE="">
             
            </td>
            <td width="215" class=signuptableth>
              Dit navn! Det er dette navn der vil blive vist på EASYBLOG.dk.
            </td>
          </tr>

          <tr class="spacerow">
            <td colspan="3"><img src="images/blank.gif" alt="" width="740" height="2" border="0"></td>
          </tr>
       
          <tr>
            <td colspan="3" style="padding: 5px; padding-bottom: 0px; padding-top: 15px;" align="center"><INPUT TYPE="submit" NAME="OK" VALUE="Opret bruger"></td>
          </tr>
         
        </table>
        </form>

</body>
</html>
0
 
JezcentralCommented:
Just as a further hint:

I've found that all-encompassing css statements about TDs like

   .signuptable td {
      background-color: #f4f5f6;
      padding: 5px;
    }

are too powerful sometimes. It's perfect for layout (like your padding: 5px; statement) as all table cells need to act the same way. However, when you start including presentation styles (like background-color: #f4f5f6;) when it will conflict with other styles (like alternating row colours) it's best to be more specific in your code, rather than trying to use general statements.

Try this sort of approach:

   .signuptable td {
      padding: 5px;
    }
   .signuptable tr {
      padding: 0px;
    }
    .signuptable tr.spacerow1 {
      background-color: #ff0000;
    }
   .signuptable tr.spacerow2 {
      background-color: #f4f5f6;
    }

Good luck! :)

Jezcentral.
0
 
JezcentralCommented:
Logicmedia, you're right to try alternating TRs, as it makes far easier for the reader. The example you saw in the book would only work if the TDs did not have their own colour.

Jezcentral.
0
 
logicmediaAuthor Commented:
I guess there is no perfect solution...

jezcentral: I like your last solution but it only "works" because of the colspan = "3". If not I would get the visible cell spacing  - of course because we are coloring the cells and not the row (which could work as well - guess that's a matter of design)... Anyway clever solution you found there!! (and btw you were right about the book ;-) )

dharmeshmaniar: I see your point in avoiding styling the TD... not a clean solution but it works and I guess that's what I needed!

Don't know yet which solution I will apply to my project yet... which ever fits the design picture best I guess...

Any way thanks both for your help... I really appriciate it!

Gonna split the points for this one!!
0
 
logicmediaAuthor Commented:
dharmeshmaniar: One last point which I forgot is of course that your solution of moving the background coloring to the table style messes up the border spacing which now gets colored... easily fixed tho by introducing a seperate class for the TD as with the TH I guess...
0
 
JezcentralCommented:
Everyone's happy! :)

By the way, if you use:

.signuptable tr.spacerow td {
      background-color: #ff0000;
    }
0
 
JezcentralCommented:
Sigh. Sorry. I hit tab and return, and submitted early.

Anyway....

If you use both:

   .signuptable tr.spacerow {
      background-color: #ff0000;
    }

   .signuptable tr.spacerow td {
      background-color: #ff0000;
    }

that should work for all cases. Remember, the reason you are seeing no change is because of the colspan completely covering the TR. Styling the TR as well will fill in the spaces between the TDs when they are not colspanned.

Happy coding!

Jezcentral.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.