how to add empty space between cells in tables?

Question

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

i don't know how to use this .. any way what shall i add to my code to make spaces between cells? — user3675605
– user3675605, Commented Jul 6, 2014 at 8:00

Ekansh Rastogi · Accepted Answer · 2014-07-06 08:38:29Z

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]

JesusRugama · Accepted Answer · 2014-07-06 07:59:37Z

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

Amir akbari · Accepted Answer · 2014-07-06 08:18:31Z

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

Collectives™ on Stack Overflow

how to add empty space between cells in tables?

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related