CSS垂直白线问题Chrome和Opera

Question

我有关于Chrome上的垂直白线以及Opera的问题。 Microsoft Edge没有此问题。

Js Fiddle

<div id="mainContainer" style="margin:auto; text-align: center">

    <table cellspacing="0"; cellpadding="0">
        <tbody>
            <tr>
                <td class="left">Lolo1</td>
                <td class="right" style="background-color: green">BlaBla1</td>
            </tr>
            <tr>
                <td class="left">Lolo2</td>
                <td class="right" style="background-color: green">Blabla2</td>
            </tr>              
        </tbody>
    </table>

如你所见，右边有一条意想不到的线，我试图以很多方式操纵它，但还没有运气。感觉它与浏览器之间的字体大小差异有关，但它不应该是。

此外，如果你试图去除身体元素margin-top，你会在底部看到一条水平的白线，这是另一个奇怪的细节。

Answer 1

似乎表元素的显示：内联值导致此问题。删除它或将其更改为显示：内联表格使得tds完全适合我的表格。