[分享]css两个表格对齐

在网页制作中，经常会出现需要将两个表格进行对齐的情况，这时候就需要运用 CSS 来实现。下面将介绍两种常用的方式。 第一种方式是使用 display 属性和 float 属性。代码如下： .left...

在网页制作中，经常会出现需要将两个表格进行对齐的情况，这时候就需要运用 CSS 来实现。下面将介绍两种常用的方式。
第一种方式是使用 display 属性和 float 属性。代码如下：

<style>
    .left {
        display: inline-block;
        float: left;
    }
    .right {
        display: inline-block;
        float: right;
    }
</style>
<p>
    <table class="left">
        <tr>
            <td>左表格</td>
        </tr>
    </table>
    <table class="right">
        <tr>
            <td>右表格</td>
        </tr>
    </table>
</p> 

在这里，我们将两个表格分别放在一个 div 容器中，并给它们一个左浮动和右浮动的属性，使它们在一个 div 容器内左右对齐。
第二种方式是使用 flex 布局。代码如下：

<style>
    .container {
        display: flex;
        justify-content: space-between;
    }
</style>
<p class="container">
    <table>
        <tr>
            <td>左表格</td>
        </tr>
    </table>
    <table>
        <tr>
            <td>右表格</td>
        </tr>
    </table>
</p> 

在这里，我们将两个表格放在一个 flex 容器内，并设置容器的 justify-content 属性为 space-between，使它们在容器内左右对齐。
总的来说，无论是使用 float 还是 flex 布局来实现两个表格对齐，都需要对容器进行设置。只要定义好容器的对齐属性，就能成功地实现两个表格的对齐效果。