I am facing a challenge with two different sets of links on a page; one set is in an unordered list, while the other is in a table. I need both sets to have shared attributes but different widths. Specifically, I want the links in the table to be aligned in the middle of each cell. Below is the code snippet that I currently have.
.nav{
padding: 0;
margin: 0;
list-style: none;
vertical-align: bottom;
}
.nav a{
display: block;
width: 150px;
}
.nav a:hover{
background-color: red;
opacity: 0.6;
filter: alpha(opacity=50);
color: white;
}
For the links in the footer, I attempted to assign a different width but it did not yield the desired result. Currently, the links in the table are 150px wide and left-aligned within each cell.
#footer.nav a{
width: 250px;
}
I have gone through this resource and also this one, but unfortunately, neither provided a solution to my issue.
Cheers