[分享]css两个表格并排

在网页设计中，表格是一种非常常见的元素。而若需要将两个表格并排展示，我们可以使用 CSS 来实现。 首先，我们需要告诉 HTML 文档中的每个表格在页面上该占据多少空间。这可以通过设置表格的宽度和边距...

在网页设计中，表格是一种非常常见的元素。而若需要将两个表格并排展示，我们可以使用 CSS 来实现。
首先，我们需要告诉 HTML 文档中的每个表格在页面上该占据多少空间。这可以通过设置表格的宽度和边距来完成。具体代码如下：

table {
  width: 50%; /* 表格占据页面宽度的 50% */
  margin: 0 5%; /* 表格左右边距各占据页面宽度的 5% */
  float: left; /* 浮动表格，使其并排展示 */
} 

上面的代码中，我们使用了 CSS 属性 `width` 来控制表格的宽度为页面宽度的一半。同时，我们在表格的左右分别设置了 5% 的边距，以便让表格之间有一定的间隔。
然后，我们需要在 HTML 中给这两个表格分别加上一个 `div` 标签，并将其放在一个父容器中。具体代码如下：

<div class="container">
  <div class="table1">
    <table><!-- 第一个表格 --></table>
  </div>
  <div class="table2">
    <table><!-- 第二个表格 --></table>
  </div>
</div> 

在上面的代码中，我们使用了 `div` 标签分别包裹了两个表格，并将它们放在了一个名为 `container` 的父容器中。
最后，为了让两个表格产生并排效果，我们需要使用 CSS 属性 `float` 来让它们浮动在同一行上。具体代码如下：

.table1 {
  float: left; /* 第一个表格向左浮动 */
}
.table2 {
  float: right; /* 第二个表格向右浮动 */
} 

在上述代码中，我们使用了 `.table1` 和 `.table2` 两个类选择器来分别选中两个表格，然后使用 `float` 属性分别让它们向左和向右浮动。
综上所述，通过设置表格的宽度、边距以及让它们浮动以及使用父容器，我们能够轻松地实现两个表格的并排展示。