我怎么能在行之间不间断地在它的边界中创造空间？ [英] how can i make space between rows without interruption in it's borders?

问题描述

我在html表格中有两行像这样：

I have two rows in an html table like this :

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

and in number one you can see that i made the borders, which i do not want to interrupt. but as shown in number two i want to add some space between the buttons in each row, without affecting the borders, what is the property i can use to do this?

这里是我的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代码：

here is my css code :

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;
}

推荐答案

属性直接在表元素上正常工作。如果您在

It looks like none of these properties are working properly directly on the table elements. If you add a <div> with class button inside the columns like

<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 将按预期工作。

演示

这篇关于我怎么能在行之间不间断地在它的边界中创造空间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！