Menu
hi there
I need two tables in one page. they need to look different from one another. how would I go about this?
Here is my CSS for the table:
table {
width: auto;
border-collapse:collapse;
border:1px solid #000;
margin-top:10px;
}
caption {
font: 12px Arial, Helvetica, sans-serif;
text-align: left;
text-indent: 10px;
height: 45px;
color: #000;
padding-top: 10px;
margin-bottom:15px;
}
thead th {
background: url(../../../mortgages/Images/th.jpg) repeat-x top;
height: 40px;
color: #fff;
font-size: 12px;
font-weight: bold;
padding: 0px 7px;
margin: 20px 0px 0px;
text-align: left;
border-right: 1px solid #000;
}
tbody tr {
background: url(../../../mortgages/Images/bg_th.jpg) repeat-x top;
}
tbody tr.odd {
background: #FFF8E8 url(bg_td2_OLD.jpg) repeat-x;
}
tbody th,td {
font-size: 13px;
line-height: 1.4em;
font-family: Arial, Helvetica, sans-serif;
color: #000;
padding: 8px 7px;
border-top: 1px solid #000;
border-right: 1px solid #000;
text-align: left;
}
a {
color: #777777;
font-weight: bold;
text-decoration: underline;
}
a:hover {
color: #000;
text-decoration: none;
}
tfoot th {
background: url(../../../mortgages/Images/bg_total.jpg) repeat-x top;
color: #FFFFFF;
height: 33px;
}
tfoot td {
background: url(../../../mortgages/Images/bg_total.jpg) repeat-x top;
color: #FFFFFF;
height: 33px;
}
tbody tr:hover{
background: url(../../../mortgages/Images/bg_hover.jpg) repeat-x top;
text-decoration: none;
}
Thanks