[分享]css两个表格怎么并排

在网页制作中，表格是常用的元素。而有时候我们需要将两个表格进行并排显示，这样可以更好的利用空间，让页面更加美观。下面就来介绍一下如何用CSS来实现表格并排显示。/设置表格的基本样式/ table{ b...

在网页制作中，表格是常用的元素。而有时候我们需要将两个表格进行并排显示，这样可以更好的利用空间，让页面更加美观。下面就来介绍一下如何用CSS来实现表格并排显示。

/*设置表格的基本样式*/
table{
  border-collapse: collapse;/*合并表格边框*/
  margin: 10px;/*表格之间的间距*/
}
td{
  border: 1px solid #ccc;
  padding: 5px;
}

/*设置两个表格容器的样式*/
.container{
  overflow: hidden;/*清除浮动*/
}

.table1,.table2{
  float: left;/*表格向左浮动*/
  width: 50%;/*占据容器的50%宽度*/
} 

上述代码中，我们先设置了表格的基本样式，包括表格的边框、单元格的边框和内边距。

接下来，我们通过设置两个表格容器的样式实现表格的并排显示。首先，我们设置了.container类的overflow属性为hidden，这样可以清除表格浮动产生的影响。接着，我们给两个表格设置了.table1和.table2类，并分别设置了宽度为50%和向左浮动的样式。

最后，在HTML中我们只需要将两个表格放到.container容器中即可：

<div class="container">
  <table class="table1">
    <tr>
      <td>表格1</td>
      <td>表格1</td>
      <td>表格1</td>
    </tr>
  </table>
  <table class="table2">
    <tr>
      <td>表格2</td>
      <td>表格2</td>
      <td>表格2</td>
    </tr>
  </table>
</div> 

以上就是用CSS实现表格并排显示的方法，通过设置容器属性可以让两个表格左右排列。这种方式可以让页面更加美观，也方便使用者查看信息。