html - 如何在表格中的单元格之间添加空白区域？

Question

我想用 html 和 css 做什么..我希望第二行的每个按钮都位于第一行每个箭头的底部..我的意思是我想在它们之间添加空间。我该怎么做？？

这是我的第二行 html 代码:

<table style="width:1160px; margin-top:10px"   cellspacing="10" cellpadding="0" bordercolor="#666666" >
<tr>
<td width="193px" class="button" ><img src="b2.png" /></td>

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

这是类按钮的 css:

.button {
    width:152px;
    text-align:center;
    background:rgb(51,153,51);
    position:relative;
    overflow:hidden;
    margin:1px;
    float: left; /* add this */
}
.button a{
    display:block;
    height:37px;
    color:white;
    line-height:100px;
    text-decoration:none;
    position:relative;
    z-index:10;
}
.button:before {
    content:" ";
    display:block;
    width:152px;
    height:37px;
    background:rgba(0,0,0,0.5);
    position:absolute;
    left:0;
    top:100%;
    transition:all 0.5s;
}
.button:hover:before {
    top:0;
}

有什么帮助吗？？

Answer 1

实现您想要的效果的最佳方法是拥有一个带有 div 的容器，该容器将包含您的组件箭头和按钮现在 float 这个 div 并添加任意数量的 div

看看 fiddle

  [http://jsfiddle.net/EHgr5/3/][1]