how to add empty space between cells in tables?


Tags: html,css,html-table

Problem :

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



Solution :

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

    CSS Howto..

    How to target itemid=“” in CSS

    How to stop text in div pushing other divs down the page?

    How can I make the input stay as it is in the hover mode, when it contains any text?

    How to remove dropdown active color in bootstrap 3.0?

    how to position nested list items?

    How to change the color of numbers in ordered list without using counter in css? [duplicate]

    How to minify and combine commented out css files

    How to divide a border into 4 equal parts?

    How to increase a counter variable after a callback of a setTimeout-function?

    How can I add read more click event to only open one news article?

    how to set a radio button state to checked with css?

    How do I confer CSS properties upon elements retrieved from $.ajax()?

    How to make this rounded shape with css [duplicate]

    How to blend CSS classes for different results

    how to fix menu bar css-adapter stuffs with IE

    How can I render country flags as a ribbon, using CSS only?

    How to insert the number into the bottom right of each page by TWIG and CSS

    How to divide content with CSS even, odd?

    hyperlink inheriting color, how to overcome

    how to solve IE6 box model problem without adding extra div and using Valid CSS?

    I am having a hard time figuring out how to dynamically setup a timeline

    How to darken the background image in CSS? [duplicate]

    How to set the css style display property in json success function

    How to use Compass Animation for Compass SCSS framework?

    How to stay on selected tab after refresh?

    how to use css button to post method in a form?

    How do you create different CSS for dynamically generated elements?

    How to make CSS button appear transparent

    How to do aligning image next to textbox with CSS? [closed]

    How to align multiple input using css