Question

我在html表中有两行，如下所示：

Desired output

并且在第一，你可以看到我制作了边框，我不想打断它。但是如第二项所示，我想在每行的按钮之间添加一些空格，而不影响边框，我可以用它做什么属性？

这是我的HTML：

<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代码：

table {
     border-collapse: collapse;  
    }
table td {
     margin: 0px 0px 0px 0px;
     padding: 0px 0px 0px 0px;
     border-left:1.0px solid #000;
     border-right:1.0px solid #000;
     border-spacing:5px;
    }


/*button class */

.button {
    width:180px;
    text-align:center;
    background:rgb(51,153,51);
    position:relative;
    overflow:hidden;
    margin-top:3px;
    margin-bottom:3px;
    margin-left:1px;
    margin-right:12px;
     /* 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:180px;
    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>类button

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

然后padding和margin将按预期工作。

Demo

Answer 2

尝试在每个</br>

之后添加</td>

Answer 3

table td {
 margin-top: 10px; // change the value from 10 to whichever you like
 margin-bottom: 10px; // same as above
 padding: 0px 0px 0px 0px;
 border-left:1.0px solid #000;
 border-right:1.0px solid #000;
 border-spacing:5px;
}

你还可以发布.button类吗？

如何在行之间留出空间而不会中断它的边界？

3 个答案: