CSS 在同一行上显示多个表格

在本文中，我们将介绍如何使用CSS在同一行上显示多个表格。有时候，我们需要在页面上显示多个表格，并希望它们同时显示在同一行上，以便节省页面空间。使用CSS，我们可以轻松实现这个效果。

阅读更多：CSS 教程

使用display属性

要在同一行上显示多个表格，我们可以使用CSS的display属性来控制表格的显示方式。默认情况下，表格以块级元素显示，每个表格占据一整行。但通过设置display属性，我们可以将表格显示为行内元素，使其可以在同一行上显示。

下面是一个示例，展示了如何使用display属性将两个表格显示在同一行上：

<!DOCTYPE html>
<html>
<head>
<style>
.table-container {
  display: inline-block;
}
</style>
</head>
<body>

<div class="table-container">
  <table>
    <tr>
      <th>表格1</th>
    </tr>
    <tr>
      <td>数据1</td>
    </tr>
  </table>
</div>

<div class="table-container">
  <table>
    <tr>
      <th>表格2</th>
    </tr>
    <tr>
      <td>数据2</td>
    </tr>
  </table>
</div>

</body>
</html>

在上面的示例中，我们创建了一个名为.table-container的CSS类，将display属性设置为inline-block。然后，我们将每个表格放在一个带有.table-container类的div元素中。这样，两个表格就会以行内元素的形式显示在同一行上。

使用float属性

除了display属性，我们还可以使用CSS的float属性来将表格显示在同一行上。通过将表格的float属性设置为left，我们可以让它们浮动到同一行的左侧。

以下是示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
.table-container {
  float: left;
  margin-right: 10px;
}
</style>
</head>
<body>

<div class="table-container">
  <table>
    <tr>
      <th>表格1</th>
    </tr>
    <tr>
      <td>数据1</td>
    </tr>
  </table>
</div>

<div class="table-container">
  <table>
    <tr>
      <th>表格2</th>
    </tr>
    <tr>
      <td>数据2</td>
    </tr>
  </table>
</div>

</body>
</html>

在上面的示例中，我们创建了一个名为.table-container的CSS类，并将其中的float属性设置为left，还设置了一个右边距（margin-right），以便在表格之间留出一些空间。通过这种方式，两个表格将浮动在同一行的左侧。