Jump to content

Table Alternate Row Color


Smee

Recommended Posts

Hi,

 

I am having some serious issues with my table. I can't for the life of me get it to color alternate rows, i have tried several tutorials and methods found on the Internet but none seem to resolve the issue of just a plain white background.

 

Can someone tell me what i am doing wrong because i have spent far to much time on this it's driving me crazy. Below i have shown the CSS and HTML i am using.

 

Thanks for the help

 

#index_newest_members table {

font-family:Tahoma, Geneva, sans-serif;

font-size: 12px;

font-weight: lighter;

padding: 0;

border-collapse: collapse;

text-align: center;

color: #000000;

line-height: 10px;

}

 

#index_newest_members td {

margin-left: 0;

padding: 12px 5px;

}

 

 

#index_newest_members th {

margin-left: 0;

}

 

#index_newest_members thead tr th {

font-family: Trebuchet MS;

font-weight: 600;

font-size: 12px;

font-style: normal;

padding:  12px 5px;

text-align:center;

}

 

#index_newest_members tfoot tr th, tfoot tr td {

background-color: transparent;

color: #ccc;

border-top: 1px solid #ccc;

padding: 20px 10px;

}

 

#index_newest_members tbody tr th td {

text-align: center;

}

 

#index_newest_members tbody tr td {

background: #FFF;

}

 

#index_newest_members tbody tr td.odd {

background: #CCC;

}

 

#index_newest_members tr:hover {

}

 

#index_newest_members tr:hover td, tr:hover td a, tr:hover th a {

color: #a10000;

}

 

#index_newest_members td:hover {

}

 

#index_newest_members table a {

color: #608117;

background-image: none;

text-decoration: none;

border-bottom: 1px dotted #8A8F95;

}

 

#index_newest_members table a:hover {

color: #BBC4CD;

background-image: none;

text-decoration: none;

border-bottom: 2px solid #333;

}

 

#index_newest_members table a:visited {

text-decoration: none;

border-bottom: 1px dotted #333;

text-decoration: none;

}

 

#index_newest_members table a:visited:hover {

background-image: none;

text-decoration: none;

border-bottom: 3px solid #333;

}

 

 

 

echo ('<table width="294" height="150" border="0" />

  <thead>

<tr>

<th scope="col">First Name</th>

<th scope="col">Post Code</th>

<th scope="col">Team Supported</th>

  </thead>

</tr>');

 

while($row = mysql_fetch_assoc($result))

  {

  echo ('

<tbody>  

  <tr>

  <td>' . $row['first_name'] . '</td>

  <td>' . $row['post_code'] . '</td>

  <td>' . $row['team_supported'] . '</td>

</tr>

</tbody>

');

  }

echo "</table>";

 

Link to comment
Share on other sites

Please don't post PHP in the CSS section of the forum. PHP irrelevant to CSS, as CSS acts on HTML. Post the HTML output of your script. And please wrap your script in code tags, it makes it easier to read. You can highlight all your code, then click the # button above the textarea where you type your post, and it will add the code tags automatically for you.

 

As for your problem - you only have one row. So how are you expecting to alternate colors?

Link to comment
Share on other sites

very easy

 

 

before while() set your color

assume this

$bg1="#FFFFFF";

$bg2="#000000";

$bg3=$bg1;

 

while loop

set your <td bgcolor=$bg3>

 

at the end of the loop set like this

if($bg3==$bg1){

$bg3=$bg2;}

elseif($bg3==$bg2){

$bg3=$bg1;}

 

as simple as that.hope it helps

Link to comment
Share on other sites

And this what i did with your code

 

$bg1="#FFFFFF";

$bg2="#000000";

$bg3=$bg1;

while($row = mysql_fetch_assoc($result))

              {

              echo ('

                  <tbody>   

                    <tr>

                    <td bgcolor=$bg3>' . $row['first_name'] . '</td>

                    <td bgcolor=$bg3>' . $row['post_code'] . '</td>

                    <td bgcolor=$bg3>' . $row['team_supported'] . '</td>

                  </tr>

                  </tbody>

                  ');

              if($bg3==$bg1){

$bg3=$bg2;}

elseif($bg3==$bg2){

$bg3=$bg1;}

}

            echo "</table>";

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.