表内行上不需要的空单元格，带有内联块显示

Question

我有两张桌子，我想并排显示。所以我将显示样式属性设置为display: inline-block。问题是，在两个表上，列都没有占据表的整个宽度。有/看不见的细胞。有趣的是，如果我从页面顶部删除DOCTYPE HTML行，则不会发生这种情况。屏幕截图中的红色标记区域是我关注的问题。

我尝试将字体大小设置为“tr”的0，然后将我想要的字体大小添加到“td”。还尝试添加负右填充/边距，但无法使其工作。请提出建议！

表格右侧的空单元格：

<table id="attn" style="display: inline-block; border: 1px solid green">
        <tr>
            <td >
                Attn: Mr. HM. Mustafizur Rahaman
                <footer>Vice President</footer>
            </td>
        </tr>
        <tr>
            <td>
                Attn: Mr. HM. Mustafizur Rahaman
                <footer>Vice President</footer>
            </td>
        </tr>
</table>

<table id="register" style="display: inline-block; border: 1px solid blue">
        <caption id="cap_tab_1">Invoice<caption>
        <thead>
            <tr>
                <td>No.</td>
                <td colspan="2">SSL/16/02011</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="width: 25%">
                    Day
                </td>
                <td style="width: 40%">
                    Month
                </td>
                <td style="width: 35%">
                    Year
                </td>
            </tr>
    </tbody>
</table>

Answer 1

要解决此问题，您可以使用display: inline-table代替display: inline-block。

说明： <table>默认接收显示属性display: table。这就是它如何排列行/列并确定它在页面上的显示方式。

当您将其更改为display: inline-block时，<table>会根据CSS将其属性丢失为适当的表格。因此，<tr> <td>等不能按预期工作，因为它们不应该在display: inline-block元素内执行。这就是display: inline-table解决问题的原因。

Answer 2

如何浮动而不是内联。在IE，Chrome和Firefox中为我工作。

--http-user="theDomain\\theUser"