CODEWITHSUNDEEP
htmlcsshtml-table
user3675605
user3675605

Reputation: 39

how to add empty space between cells in tables?

enter image description here

what i want to do with html and css .. that i want each button on the second row to be on the bottom of each arrow on the first row .. i mean i want to add space between them . how can i do this??

here is my html code for the second row :

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

and here is the css for class button :

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

any help??

Upvotes: 0

Views: 1637

Answers (3)

Ekansh Rastogi
Ekansh Rastogi

Reputation: 2526

Best way to achive what you want would be to have a container with div that will have both your components the arrow and the button Now float this div and add as many divs as you want

Take a look at the fiddle 

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

Upvotes: 1

Amir akbari
Amir akbari

Reputation: 62

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

Upvotes: 0

JesusRugama
JesusRugama

Reputation: 51

Why dont you just use the same width for the buttons?

.button{
    width:193px;

    //More Styles here ...
}

Or do some math if you want blank space

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

    //More Styles here ...
}

Upvotes: 0

Related Questions