如何在表格中的单元格之间添加空格？

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的容器，它将使你的组件成为箭头和按钮 现在浮动这个div并添加任意数量的div

看看小提琴

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

Answer 2

为什么不使用相同宽度的按钮？

.button{
    width:193px;

    //More Styles here ...
}

如果你想要空格，可以做一些数学

.button{
    width:188px;
    margin-right:5px

    //More Styles here ...
}

Answer 3

.button {
    width: 152px;
    text-align:center;
    background:rgb(51,153,51);
    position:relative;
    overflow:hidden;
    margin:1px 10px 1px 1px; /* add this */
    float: left;
}
.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;
}