html中table并排展示

<div class="modal-body" style="width: 100%">
                <table>

                    <tr>
                        <td>
                            <!--<div style="width: 50%;" id="showBaseResponse">-->
                            <table width="50%"   border=1   style="display:inline" class="table-bordered" id="ESCompare" >
                                <tbody></tbody>
                            </table>
                            <!--</div>-->
                        </td>
                        <td>
                            <!--<div style="width: 50%;" id="showDiffResponse">-->
                            <table width="50%"   border=1   style="display:inline" class="table-bordered" id="TestCompare">
                                <tbody></tbody>
                            </table>
                            <!-- </div>-->
                        </td>
                    </tr>


                </table>


            </div>