如何在单个对象中获得并排的表行？

<style>
    .table-row {
        display: inline-block;
        margin-right: 10px;
    }
</style>

<div class="table-row">
    <table>
        <thead>
            <tr>
                <th>表头1</th>
                <th>表头2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>数据1</td>
                <td>数据2</td>
            </tr>
            <tr>
                <td>数据3</td>
                <td>数据4</td>
            </tr>
        </tbody>
    </table>
</div>

<div class="table-row">
    <table>
        <thead>
            <tr>
                <th>表头1</th>
                <th>表头2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>数据5</td>
                <td>数据6</td>
            </tr>
            <tr>
                <td>数据7</td>
                <td>数据8</td>
            </tr>
        </tbody>
    </table>
</div>