css - 带有内联 block 显示的表格内行上不需要的空单元格

Question

我有 2 个要并排显示的表格。所以我将显示样式属性设置为 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解决了这个问题。