This is the CSS I am working with:
table {
margin: 10px 0 20px 0;
width: 100%;
text-align: center;
}
table th {
color: #38A4FC;
padding-top: 5px;
background-color: #f9f9f9;
width: 200px;
height: 30px;
border: 1px solid #d7d7d7;
border-bottom: none;
}
table td {
background-color: #fff;
height: 35px;
border: 1px solid #d7d7d7;
padding: 10px;
}
table tr:hover td {
background-color: #eee;
}
In addition to this, I have another set of classes for a different table:
.web_table
{
width:90%;
border:0px solid;
}
.web_table_td_left
{
width:50%;
height:30px;
font-family:Arial;
font-size:15px;
color:#000000;
}
.web_table_td_right
{
width:50%;
height:30px;
font-family:Arial;
font-size:15px;
color:#000000;
text-align:center;
}
However, when I apply these classes to a table like this:
<table class="web_table"><tr><td class="web_table_tf_left"></td><td class="web_table_tf_right"></td></tr></table>
The table ends up using the properties from the general "table" CSS rather than the specific class styles. I'm not sure what's going wrong here, it seems like when one class is applied, it should override the others. Any insights would be appreciated.