如何让我的两张桌子彼此对齐？答案

【问题标题】：How do I get my two tables to align beside each other?如何让我的两张桌子彼此对齐？
【发布时间】：2017-08-04 05:40:36
【问题描述】：

我无法让我的两个表格彼此对齐。第二个蓝色盒子（较小的盒子）一直坐在第一个盒子下面。我尝试在每个元素上使用“display：inline-block”和“float：left”，但没有任何反应。请帮忙？

#zero-data {
  border: 1px solid black;
  height: 200px;
  width: 200px;
  text-align: center;
}

#table-12 tr {
  display: inline-block;
}

.data-1234 {
  border: 1px solid blue;
  width: 95px;
  height: 95px;
  text-align: center;
}

#table-34 tr {
  display: inline-block;
}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Problem.css">
</head>

<body>

  <!-- big table -->
  <table id="zero-table">
    <tr id="zero-row">
      <td id="zero-data">0</td>
    </tr>
  </table>

  <!-- tables 1 & 2 -->
  <table id="table-12">
    <tr id="row-1">
      <td class="data-1234">1</td>
    </tr>
    <tr id="row-2">
      <td class="data-1234">2</td>
    </tr>
  </table>

  <!-- tables 3 & 4 -->
  <table id="table-34">
    <tr id="row-3">
      <td class="data-1234">3</td>
    </tr>
    <tr id="row-4">
      <td class="data-1234">4</td>
    </tr>
  </table>

</body>

</html>

【问题讨论】：

你试过ghost列吗？把它放在桌子之间。幽灵列将被 Outlook 读取。
@Syfer 我不确定什么是幽灵列，但我会查一下。感谢您让我知道！
您可以将它们设置为内联表 - jsfiddle.net/bf8h1h78
@Pangloss 这也很好用，感谢您的帮助！哇，我真的不擅长这些东西

标签： html css html-table rows

【解决方案1】：

像这样？

.wrapper {
  background-color: red;
}

#zero-table,
#table-12,
#table-34 {
  float: left;
}

#zero-data {
  border: 1px solid black;
  height: 200px;
  width: 200px;
  text-align: center;
}

.data-1234 {
  border: 1px solid blue;
  width: 95px;
  height: 95px;
  text-align: center;
}

<div class="wrapper">
  <table id="zero-table">
    <tr id="zero-row">
      <td id="zero-data">0</td>
    </tr>
  </table>

  <table id="table-12">
    <tr id="row-1">
      <td class="data-1234">1</td>
    </tr>
    <tr id="row-2">
      <td class="data-1234">2</td>
    </tr>
  </table>


  <table id="table-34">
    <tr id="row-3">
      <td class="data-1234">3</td>
    </tr>
    <tr id="row-4">
      <td class="data-1234">4</td>
    </tr>
  </table>
</div>

【讨论】：

是的，就是这样，谢谢一百万！我一定忘记使用包装器了。否则，谢谢！
是的，刚刚做了，非常感谢！
我只是在对结果进行初始测试时忘记删除它
@Pangloss 然后我真的不确定我做错了什么，因为我对每个元素都应用了“float：left”但什么也没发生。但是 rafarlp 回答了，哈哈。我还是 html/css 的新手，所以会让人感到困惑，哈哈
你应该问发布答案的人，但上面的演示有效。

【解决方案2】：

试试幽灵列。把它放在每张桌子之间。

<!-- your table -->
<!--[if (gte mso 9)|(IE)]> 
</td> 
<td width="150" align="left" valign="top"> 
<![endif]-->
<!-- your table -->

一旦你把它放在表格中，应该开始正确对齐。将 TD 的宽度更改为代码中应有的宽度。让我知道你走了。

【讨论】：

没关系，Carl Jan 解决了这个问题。但有时我会尝试使用这种方法。感谢您通知我！
我想我误解了你的问题。我以为这是用于电子邮件的。
哦不，我是用盒子来存储照片的

【解决方案3】：

无需为每个元素添加 Float。由于您希望第二个和第三个表格出现在第一个表格旁边，您只需将 Float 添加到第一个表格：

#zero-table { float: left; }

See JSFiddle

【讨论】：

啊，我明白了，它变得非常混乱。感谢您清除它！