[分享]css两个表格上下对齐

CSS中的表格是网页设计中常用的元素，有时候会出现表格上下对齐不齐的情况，为了解决这个问题，我们可以使用CSS来设置两个表格上下对齐。table { bordercollapse: collapse;...

CSS中的表格是网页设计中常用的元素，有时候会出现表格上下对齐不齐的情况，为了解决这个问题，我们可以使用CSS来设置两个表格上下对齐。

table {
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid black;
  padding: 8px;
  text-align: center;
  vertical-align: middle;
}

table.second {
  margin-top: 30px;
} 

首先，我们需要为表格设置一个固定的宽度和边框样式等基本样式，并将单元格的垂直对齐方式设置为middle。

其次，我们需要在第一个表格之后插入一段空白的文本或使用CSS的margin来添加空白，从而为下面的第二个表格留出一定的间隔。这里我们使用了margin-top: 30px来添加空白。

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>20</td>
    <td>男</td>
  </tr>
  <tr>
    <td>小红</td>
    <td>18</td>
    <td>女</td>
  </tr>
</table>

<p></p>

<table class="second">
  <tr>
    <th>科目</th>
    <th>成绩</th>
  </tr>
  <tr>
    <td>数学</td>
    <td>90</td>
  </tr>
  <tr>
    <td>英语</td>
    <td>80</td>
  </tr>
</table> 

最后，在第二个表格的类名中添加一个second的类名，以便于用CSS对第二个表格进行特殊定制。

这样设置之后，两个表格就可以上下对齐了。