How to remove margin and padding from css table
<p>I want to remove the spacing between the 2 rows.
The table is a css only table. </p>

<p>JS Fiddle: <a href="https://jsfiddle.net/n841wvwn/" rel="nofollow noreferrer">https://jsfiddle.net/n841wvwn/</a></p>

<p>CSS:</p>

<pre><code>* {
    padding: 0px;
    margin: 0px;
}

div.table {
    display: table;
    border-collapse: collapse;
    table-layout:fixed;
}

div.tr {
    display: table-row;
}

div.td {
    display: table-cell;
    padding:0; margin:0;
}

.button {
    width: 88px;
    height: 55px;
    border: none;
    margin: 0px;
    padding: 0px;
}



#ac {
    background-image: url('http://i.imgur.com/u9znwQK.png');
    background-size: 100%;
}

#ce {
    background-image: url('http://i.imgur.com/azae5uQ.png');
    background-size: 100%;
}

#multiplication {
    background-image: url('http://i.imgur.com/veBf82o.png');
    background-size: 100%;
}


#division {
    background-image: url('http://i.imgur.com/i6KcXGr.png');
    background-size: 100%;
}


#number7 {
    background-image: url('http://i.imgur.com/0GixHJ5.png');
    background-size: 100%;
}
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div class="container"&gt;
        &lt;div class="table" id="calculator"&gt;
            &lt;div class="tr"&gt;
                &lt;div class="td" id="display"&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="tr"&gt;
                &lt;div class="td"&gt;
                    &lt;button class="button" id="ac"&gt;&lt;/button&gt;
                &lt;/div&gt;
                &lt;div class="td"&gt;
                    &lt;button class="button" id="ce"&gt;&lt;/button&gt;
                &lt;/div&gt;
                &lt;div class="td"&gt;
                    &lt;button class="button" id="division"&gt;&lt;/button&gt;
                &lt;/div&gt;
                &lt;div class="td"&gt;
                    &lt;button class="button" id="multiplication"&gt;&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="tr"&gt;
                &lt;div class="td"&gt;
                    &lt;button class="button" id="number7"&gt;&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
</code></pre>

<p>Between this circle I want no spacing. <a href="https://i.imgur.com/a3wMyLA.png" rel="nofollow noreferrer">http://i.imgur.com/a3wMyLA.png</a></p>

<p>The layout is based on a table div, which has table-layout fixed and display table. Also I have border-collapse set to collapse and every padding and margin to 0px. </p>

<p>For some reason the button is 55 px but the  div is 59 pixel in height.</p>