Html 两张桌子紧挨着

我希望idTable和userTable在一起，并且idTable下面的按钮。我试过显示：内联块；但这没用。此外，我还尝试将按钮放在divuserTable之后，但这会使按钮在每次该表填充更多数据时下降得更多。我希望按钮保持在左侧不动。而userTable及其信息位于第一个表的右侧

HTML:

您可以将idTable和按钮放入另一个div（例如wrapper）并将其设置为左侧

HTML:

---

请参见

您添加clear的目的是什么？你什么都没有浮动。无论如何，添加按钮作为显示块。这有很多方法可以实现，这是一种方法@这就是问题所在，除非有元素浮动，否则我认为没有必要进行清晰浮动。jsfiddle.net/82zv67d7/4@vaultah这就是问题所在。我希望按钮保持在第一张桌子正下方的位置。不要随着第二张桌子变大而移动，将第一张桌子和按钮包装成一个div，并将div向左浮动；

<input type="date" />
<input type="date" />
<br style="clear:both" />
<table border="1" id="idTable">
    <tr>
        <th><b>#</b>

        </th>
        <th><b>ID</b>

        </th>
    </tr>
    <tr>
        <td>// #'s here</td>
        <td>// ID's here</td>
    </tr>
</table>
<br style="clear:both" />
<button>Update</button>
<div id="userTable">
    <table border="1">
        <tr>
            <td><b>ID</b>

            </td>
            <td>Name</td>
        </tr>
        <tr>
            <td colspan="2">
                <table border="1" style="width:100%">
                    <tr>
                        <td><b>ID</b></td>
                        <td><b>Name</b></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>

#idTable{
    display:inline-block;
}

#userTable{
    display:inline-block;
}

<div id='wrapper'>
    <table border="1" id="idTable">
        <tr>
            <th><b>#</b>

            </th>
            <th><b>ID</b>

            </th>
        </tr>
        <tr>
            <td>// #'s here</td>
            <td>// ID's here</td>
        </tr>
    </table>
    <button>Update</button>
</div>

#wrapper {
    float: left;
}