Question

以下是我的2x表代码。有PHP＆amp;结果我已删除。但我无法将这些放在一条线上，而是彼此相邻。

我尝试过左/右对齐，这会将它们分成两行？我也试过漂浮，这也没有帮助。

有人对我有建议吗？

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

尝试添加 display：inline-block;

更新CSS

sudo php5enmod opcache
sudo service apache2 restart

WORKING:DEMO

Answer 2

Float不能在display: table上工作，这是默认的表格显示属性。

您必须在其上放置display: block才能浮动它们

table {
  border: 1px solid #000;
  display: block;
  float: left;
  width: 40%;
}
table:first-child {
  margin-right: 40px;
}

Working Fiddle

Answer 3

如果希望表格始终左右对齐，您还可以在每个表格中添加左右类，并在css中定义浮点数。

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>

您不需要'table'类，因为您可以将table标记用作选择器。

HTML / CSS表格放置

3 个答案: