正在尝试使表格和面板在html中对齐

<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid black;
        padding: 8px;
    }
    .panel {
        float: left;
        width: 50%;
        padding: 8px;
        box-sizing: border-box;
    }
    .clear {
        clear: both;
    }
</style>

<table>
    <tr>
        <th>表格标题1</th>
        <th>表格标题2</th>
    </tr>
    <tr>
        <td>表格内容1</td>
        <td>表格内容2</td>
    </tr>
</table>

<div class="panel">
    面板内容
</div>

<div class="clear"></div>