CSS HTML表格背景颜色溢出

我一直在尝试制作一个基于表格的导航栏，由5个并排的图像组成，当鼠标悬停并单击时，在：active和：hover上使用较低的不透明度“高亮显示”，并使用浅色背景色。比如说

    .navbright {
background-color:#FFC39A;
}
.navbright:hover {
opacity: 0.6;
}

.navbright:active {
opacity: 0.3;
}

问题是背景色的实现。它总是比图像低几个像素。我研究过的所有解决方案都不起作用，即边界崩溃：崩溃；利润底部：-3px；将所有边框填充间距边距设置为0等

我想找到一个基于消除额外空间/背景空间的表格解决方案。如果这是不可能的，也许有人可以告诉我如何使用严格的CSS而不是表来构造相同的构造

我使用div并将背景色设置为div类的一部分，即：

    <td><div class="navbright"><a href="http://www.example.com"><img src="/images/Home.jpg" alt="" width="200"></a></div></td>

---

感谢您的帮助。此外，如果有人有一个好主意，一个CSS只设计没有表来实现同样的事情，请让我知道。基本上，这是一个1000像素宽的中心柱。

哇，这是一个巨大的工作。我找到了一个解决办法，也许不是最好的办法

首先，我将表格设置为背景色，并将其显示为块

    <table style="display:block;position:relative;top:0px;" align="center" height="37" width="1000" bgcolor="#FFC39A" cellpadding="0" cellspacing="0">

把整个背景任务都从课堂上拿走。将位置设置为相对允许更灵活的定位，即使它们都由0px修改。。。想想看

---

还有一个边界显示的最后一个小故障：活跃在我的链接周围，但这是另一个问题

你能提供JSFIDLE代码段吗？好吧，我甚至不能让FIDLE脚本将图像并排排列在一起，但是这个想法是下面的示例，没有所有额外的背景，它位于蓝色横幅的右侧：

    #page td {
  padding:0; margin:0;
}

#page {
border-collapse: collapse;
}

    <table style="display:block;position:relative;top:0px;" align="center" height="37" width="1000" bgcolor="#FFC39A" cellpadding="0" cellspacing="0">

.navbright {
position: relative;
top: 0px;
}