[分享]css两个table列宽相同

在制作网页布局时，我们经常会使用表格（table）来实现页面内容的排版。如果在一个表格中需要展示多列内容，通常会使用多个table列来实现，但是如果这些列宽度不一致，就会导致页面视觉效果不协调。下面我...

在制作网页布局时，我们经常会使用表格（table）来实现页面内容的排版。如果在一个表格中需要展示多列内容，通常会使用多个table列来实现，但是如果这些列宽度不一致，就会导致页面视觉效果不协调。下面我们来介绍一下如何利用CSS让两个table列的宽度相同。
首先，我们需要在HTML中定义两个table元素，如下所示：

 <table id="table1">
    <tr>
      <th>标题1</th>
      <td>内容1</td>
    </tr>
    <tr>
      <th>标题2</th>
      <td>内容2</td>
    </tr>
  </table>
<br>
  <table id="table2">
    <tr>
      <th>标题3</th>
      <td>内容3</td>
    </tr>
    <tr>
      <th>标题4</th>
      <td>内容4</td>
    </tr>
  </table> 

接下来，我们可以在CSS中定义样式来实现两个table列宽度相同，代码如下：

 /* 定义两个table的宽度为50% */
  #table1, #table2 {
    width: 50%;
    display: inline-block;
    vertical-align: top;
  }
<br>
  /* 定义表格内所有单元格（th和td）的宽度为50% */
  #table1 th, #table1 td, #table2 th, #table2 td {
    width: 50%;
  } 

需要注意的是，为了让两个table并排显示，我们将它们的display属性设置为inline-block，并且将它们的垂直对齐方式设置为顶部（vertical-align: top）。
最终实现的效果是，两个table的列宽相同，具有统一的视觉效果。如果需要增加更多的table列，只需要按照上述方法定义即可。
以上就是利用CSS让两个table列宽度相同的方法，希望对大家有所帮助。