为什么我在这个表行中看不到列的边框？

Question

我所拥有的是一个html页面，这里有一个图像：

正如你所看到的，我有一张桌子，在第一行边框工作得很好，但是在表格的下一行中，它没有显示垂直线条而是显示在每个按钮周围我不想要..以及在每个单元格之间切割的横向..我想这是因为边距..所以我怎样才能使水平线连续并且出现垂直线？谁能告诉我这是什么问题？

这是我的HTML代码：

<div id="wrapper">
</div>
<table>
<tr>
<td width="188px" class="button" ><img src="b2.png" /></td>

<td width="188px" class="button" ></td>
<td width="188px" class="button" ></td>
<td width="188px" class="button" ></td>
<td width="188px" class="button" ><img src="b1.png" /></td>
<td width="188px" class="button" ></td>
</tr>
</table>

这是CSS：

.button {
    width:180px;
    text-align:center;
    background:rgb(51,153,51);
    position:relative;
    overflow:hidden;
    margin-top:1px;
      margin-bottom:1px;
        margin-left:1px;
        margin-right:12px;
    float: left; /* add this */
}

table td {

    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
     border:1.0px solid #000;
}

任何人都可以帮助我吗？

Answer 1

您的代码中存在很多问题。第一个是您将float: left应用于.button，该td与您的border-collapse: collapse匹配。删除该行，它完全打破了表格。

然后您可以将div.wrapper添加到您的表格中。

此外，我不确定您是否打算将该表放在{{1}}中。

小提琴：http://jsfiddle.net/bDHW6/

Answer 2

我不是100％确定你在寻找什么，但我认为你希望你的桌面风格包含border-collapse: collapse。这将删除相邻单元格之间的间距，并基本上合并它们的边框。作为替代方案，如果您仍希望绘制两个边框，则可能需要尝试border-spacing: (distance)。