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 select with css specific id only if have specific class on same div?

    how to make css for work for different mobile sites

    How to completely fill screen with smaller elements?

    How to feature detect for CSS custom properties? [duplicate]

    how to set background image in css at MVC4

    How to stretch text in CSS like microsoft word?

    How do I execute a javascript after Ajax load?

    How to recreate eBay New Logo Page in HTML + CSS

    How to set the padding of QTableView cells through CSS?

    CSS styles “leaking” to non-intended elements, why does it happen and how to prevent it?

    How to incorporate CSS into a table

    How do I iterate through the elements of a table and change the background color of each element in JavaScript?

    How to get a white outline around an image in CSS

    How do I spread out this navbar along with making the links exclusive to the button itself?

    How can I add more images to my HTML5/CSS3 Slideshow

    how to make multiple inline dropdown lists cross platform compatible?

    How to know if an element's width is absolute or relative?

    HTML to PDF (by javascript) how can I add css or table?

    How can I use a non-breaking space before an inline-block-default element, such as a

    HTML: how to make 2 tables with different CSS [closed]

    How to set height and width of video element in percent

    How to make inner div of Flexbox height of parent

    how to make a space-keeping column use css and table tag

    How to remove
      unordered list's last
    • list item's border using css without changing anything in HTML code?

    How to set animation in css?

    How to insert several images into HTML/CSS quickly? [closed]

    Limit number of lines shown in a textbox, but not limiting the user to write

    How to use images in css with Webpack

    How to move Woocommerce Description tab below review tab

    How to fill in blank space using html and css