[分享]css两个table并排

CSS是一种非常方便的样式语言，它可以帮助我们在网页上实现很多的效果。比如，在网页上将两个table并排显示，就可以利用CSS来完成。下面我们来看一下具体的操作。 .tablecontainer { ...

CSS是一种非常方便的样式语言，它可以帮助我们在网页上实现很多的效果。比如，在网页上将两个table并排显示，就可以利用CSS来完成。下面我们来看一下具体的操作。

 <style>
    .table-container {
      display: flex;
      justify-content: space-between;
    }

    table {
      width: 49%;
    }
  </style>

  <div class="table-container">
    <table>
      <tr>
        <th>标题1</th>
        <th>标题2</th>
      </tr>
      <tr>
        <td>内容1.1</td>
        <td>内容1.2</td>
      </tr>
    </table>
    <table>
      <tr>
        <th>标题3</th>
        <th>标题4</th>
      </tr>
      <tr>
        <td>内容2.1</td>
        <td>内容2.2</td>
      </tr>
    </table>
  </div> 

代码解释：

首先使用class为table-container的div将两个table包裹起来，然后使用CSS的flex布局，将两个table横向并排展示，并设置table的宽度为49%。

以上就是将两个table并排展示的方法，希望对大家有所帮助。