How to remove white spacing between table cells in Edge Browser

Question

I have following html table:

Home Booking Requests School Profile Booking Help

CSS

.navBarItemContainer {
    background-color:#e5e5e5;width:25%;display:inline-block;
    margin:0px;
    border-collapse: collapse;
    color:black;
    height:90px;
}
.navBarItemContainer_selected {
    background-color:#efefef;width:25%;display:inline-block;
    margin:0px;
    border-bottom:4px solid #fece00;
    color:black;
    border-collapse: collapse;
    height:90px;
}
noBordertable, .noBordertable td {
    border:0;background:none;margin:0;padding:0;
}

JSFiddle

On google chrome browser, it works fine but on new Edge browser it shows white space between table cells (<td>s) and hence last td is shown in next line. What should I do to fix it in edge brower?

Answer 1

You should do only one thing remove space/break line between </td> and new <td> will solve your issue.

Because you are using display:inline-block and it will count every space between end element and start element.

So it should be like:

</td><td style="padding:0;margin:0;border-collapse: collapse;" class="navBarItemContainer">

Not:

</td>
<td style="padding:0;margin:0;border-collapse: collapse;" class="navBarItemContainer">

Working Fiddle

Check for more information

Answer 2

A simple way is to really make them inline:

So instead of this:

<td>

</td>
<td>

</td>

make it like this:

<td>

</td><td>

</td>

or you may have it like this:

<td>

</td><!--
--><td>

</td>

or you may put the last character at the new line:

<td>

</td
><td>

</td>

This article has a full story about Fighting the Space Between Inline Block Elements which you may want to take a look.