table css override

Hi,

How do I overrride the table css  as below which work for every table on the website? I have another table which
I want to display another way

   table,  th ,td{
    border-bottom: 1px solid lightblue;
     border-bottom: 1px solid blue;
      font-size: .93em; /* 14px/16=0.875em */
      font-family: "Arial", Times, serif;
    font-weight: bold;
    //   color: #666666;
    // background-color: lightgreen;
   //color:red;
}


tr {
     
    	vertical-align: bottom;
}


th {
    background-color: lightblue;
    
    color: black;
}
.td1{
    
    color: #3399ff
}

Open in new window

jagguyAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Jessica WhitleySoftware DeveloperCommented:
Give your tables a class name according to the stylings.
Say style1 and style2.

table.style1 (continue styles as above)
Do the same for style 2.
In the table tags be sure to add class="style 1or 2"☺
jagguyAuthor Commented:
This is not working.
I want to have the same table,tr css and only for the odd table add a class so I can override the default table css.

For example i cant remove the blue border from the style2/3 table as it always picks up the tr css


   table,  th ,td{
    border-bottom: 1px solid blue;
      font-size: .93em; /* 14px/16=0.875em */
      font-family: "Arial", Times, serif;
    font-weight: bold;
   
}

style2.table,  style2.th ,style2.td{
     border: none;
      font-size: .93em; /* 14px/16=0.875em */
      font-family: "Arial", Times, serif;
 
}

style3.tr {
      border-bottom: 1px solid red;
      font-size: .93em; /* 14px/16=0.875em */
      font-family: "Arial", Times, serif;

}

   echo '<table class="style2" >';
            echo '<tr class="style3">';
              
               echo '<td>';
         

Open in new window

Jessica WhitleySoftware DeveloperCommented:
If you only want to change the styling for one table row you can just change it inline/
style="border: none; "
Dynamically adding the table is part of the reason the styling is defaulting. If you give the table class one style class and the table row another class you are essentially cancelling out the border by saying border none but than saying you want 1px solid red.

style2.table{
border: none;
font-size: .93em; /* 14px/16=0.875em */
font-family: "Arial", Times, serif;
}
style2.tr{
border-bottom: 1px solid red
}

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jagguyAuthor Commented:
sorry your explanation just isnt working.

For example I just dont get any css now when I set the table to.
It just doesnt pick anything up

style1.table {
  background-color: red;
  color:greenyellow;
}

style1.tr {
border-bottom: 1px solid red
} 



  echo '<br><table class="style1">';
          
            echo '<tr> <td>';

Open in new window

jagguyAuthor Commented:
ok wait if I reversed the command it works

table.style1
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.