CSS - Horizontal white space on display table and table-cell divs
===

I have a problem with an horizontal white space that appears inside a div without any reason. I mean, I cant' figure out WHY it appears, it just doesn't make any sense.

The layout should be two columns: one right and one left and the latter one is larger. The problem is that on the right div I see contents shown regularly, with all alignments well shown. On the left one, its contents are lower, I mean it seems like it has a padding-top of about 5px, but there's no padding at all. The white space is INSIDE the left table-cell div, because even with plain text inside it ("Lorem ipsum"), the text is shown lower than the contents inside the right div.

HTML code is:

    <div id="main_contents_cage">
        <div id="main_contents_left">
            <table> ... some content ... </table>
        </div>

        <div id="main_contents_right">
            ... some other content ...
        </div>
    </div>

CSS is:

    #main_contents_cage { display: table; }
    #main_contents_left, #main_contents_right { display: table-cell; }
    
    #main_contents_left { width: 742px; }
    #main_contents_right { width: 246px; border-left: 1px solid #C6C6C6; } 

I searched the internet and StackOv for anyone else with the same problem without finding anyone with the same issue. Similar, but not the same at all!

I tried giving border-collapse/border-spacing to all the elements (once each, then just the "table" one, then just the "table-cell" ones, then the three of them): nothing.

I tried changing the contents of the table-cell divs, without any different result (replacing the table with other divs, or just plain text....).

Anyone has any idea?