html - 垂直 HTML 按钮间距问题

Question

我有三个<input type="submit" />垂直排列的元素。前两位同在 <div>和<table> ，但底部的一个是不同的 <div>和<table> 。我无法更改此设置，因为它是在较大页面的上下文中用于用户体验目的，而这只是其中的一个片段。我的第三个按钮多了几个像素，太低了，导致这三个按钮之间的间距不一致。

我不想做一个瘾君子vertical-align: -2px或类似的东西。我想要的是了解为什么间距不一致。感谢您的阅读。

这是一个 JSFiddle 示例: https://jsfiddle.net/y57wLtjb/

Answer 1

对表格使用border-spacing: 0;

table {						
	border-collapse: collapse;
	border-spacing: 0;
}

<div id="pre-update-section">
    <table>
        <tr>
            <td><input style="width:100%" type="submit" value="Check for duplicates" data-bind="click: CheckForDuplicates" id="btnCheckDups" /></td>
            <td><label id="ajaxStatusMsg"></label></td>
        </tr>
        <tr>
            <td><input style="width:100%" type="submit" value="Load Catalog Parts" data-bind="click: LoadCatalogParts" id="btnLoadCatalogParts" disabled="disabled" /></td>
            <td></td>
        </tr>
    </table>
</div>
    
<div id="start-update-section">
    <table >
        <tr>
            <td><input style="width:100%" type="submit" value="Run Catalog Update" data-bind="click: RunCatalogUpdate" id="btnRunCatalogUpdate" disabled="disabled" /></td>
            <td>
            </td>
        </tr>
    </table>
</div>