[分享]Css两个table对齐

在网页设计中，往往需要使用table来排列页面元素。但是，当一个页面需要使用多个table时，这些table的对齐就成了一个问题。在CSS中，我们可以使用float、display和等属性来解决这个问...

在网页设计中，往往需要使用table来排列页面元素。但是，当一个页面需要使用多个table时，这些table的对齐就成了一个问题。在CSS中，我们可以使用float、display和position等属性来解决这个问题。
首先，我们需要使用HTML的table标签来创建两个表格，代码如下：

<table>
  <tr>
    <td>表格1</td>
  </tr>
  <tr>
    <td>表格1-内容1</td>
    <td>表格1-内容2</td>
  </tr>
</table>
<br>
<table>
  <tr>
    <td>表格2</td>
  </tr>
  <tr>
    <td>表格2-内容1</td>
    <td>表格2-内容2</td>
  </tr>
</table>

接下来，我们可以使用CSS对这两个表格进行对齐。我们可以使用float属性来让这两个表格左右排列。使用以下代码可以实现：

table {
  width: 50%;
  float: left;
  margin-right: 2%;
}

在这个代码中，我们定义了table的宽度为50%，并且让这两个table浮动到左侧。为了让两个table之间有一定的距离，我们在第一个table中使用了margin-right:2%。
这个时候，我们会发现第二个table会显示在第一个table的下方。解决这个问题的方法是在第二个table中使用clear:both属性，即：

table:nth-child(2) {
  clear: both;
}

这样，两个表格就可以实现整齐的左右对齐了。
以上是关于CSS实现两个table对齐的方法，当然还有其他的方法可以实现对齐，如使用position:absolute属性。但是，float属性是一个简单、易懂的方法，能够轻松实现不同数量表格的对齐效果。