HTML/CSS 表格放置

Question

下面是我的 2x 表代码。我删除了 PHP 和结果。但我无法将它们排在一行中，而是并排放置。

我试过左对齐/右对齐，这会将它们放在 2x 单独的行上吗？我也尝试过 float ，但这也没有帮助。

有人对我有什么建议吗？

HTML

<table width="40%" border="0" cellpadding="0" cellspacing="2" class="table">
      <tr align="center">
        <td colspan="16" class="header"><center>Last 5 Received Transactions</center></td>
      </tr>
      <tr align="center">
        <td class="header"><center>Transaction ID</center></td>
        <td class="header"><center>Sent To</center></td>
        <td class="header"><center>Amount</center></td>
        <td class="header"><center>Date</center></td>
      </tr>
</table>
<table width="40%" border="0" cellpadding="0" cellspacing="2" class="table">
      <tr align="center">
        <td colspan="16" class="header"><center>Last 5 Sent Transactions</center></td>
      </tr>
      <tr align="center">
        <td class="header"><center>Transaction ID</center></td>
        <td class="header"><center>Sent By</center></td>
        <td class="header"><center>Amount</center></td>
        <td class="header"><center>Date</center></td>
      </tr>
</table>

CSS:

 table
    {
    border: #000000 1px solid;
    background-color: #363636;
    }

Answer 1

如果您希望表格始终左右对齐，您还可以为每个表格添加一个 left 和 right 类，并在您的 css 中定义 float 。

table.left {
  float: left;
}
table.right {
  float: right;
}

<table width="40%" border="0" cellpadding="0" cellspacing="2" class="left">
  YOUR LEFT TABLE content
</table>
<table width="40%" border="0" cellpadding="0" cellspacing="2" class="right">
  YOUR RIGHT TABLE content
</table>

您不需要“表格”类，因为您可以将表格标签用作选择器。