html - CSS:对齐表格重叠 DIV 容器

Question

我创建了两个表格，它们在 html 源代码中使用属性 align="left" & align="right" 并排显示。我将这些表格打包到一个带有指定类 outerdiv 的 div 容器中，这样我就可以在它们后面添加一个线性渐变背景。遗憾的是，表格不会显示在 div 中。

我尝试将 table-layout:fixed; 添加到 .table，正如一些网站推荐的那样。我还将 border-collapse:separate; 设置为表格单元格。

如何将背景正确放置在 table 后面？

.table {
  width: 48%;
  margin: 1% !important;
  background: red;
  border-spacing: 20px;
  table-layout: fixed;
}
.outerdiv {
  border: 1px solid rgb(164, 164, 164);
  border-radius: 8px;
  background: transparent linear-gradient(rgb(255, 255, 255), rgb(222, 222, 222)) repeat scroll 0% 0%;
  clear: both;
}

<div class="outerdiv">
  <table class="table" align="left">
    <tbody>
      <tr>
        <td>4
        </td>
      </tr>
      <tr>
        <td>Apples
        </td>
      </tr>
    </tbody>
  </table>
  <table class="table" align="right">
    <tbody>
      <tr>
        <td>2
        </td>
      </tr>
      <tr>
        <td>Bananas
        </td>
      </tr>
    </tbody>
  </table>
  <p></p>
</div>

Answer 1

只需将 display: inline-block 添加到您的 outerdiv 类。这将正确地将表包装在父级 div 中。像这样:

.table {
  width: 48%;
  margin: 1% !important;
  background: red;
  border-spacing: 20px;
  table-layout: fixed;
}
.outerdiv {
  border: 1px solid rgb(164, 164, 164);
  border-radius: 8px;
  background: transparent linear-gradient(rgb(255, 255, 255), rgb(222, 222, 222)) repeat scroll 0% 0%;
  clear: both;
  display: inline-block;
}

<div class="outerdiv">
  <table class="table" align="left">
    <tbody>
      <tr>
        <td>4
        </td>
      </tr>
      <tr>
        <td>Apples
        </td>
      </tr>
    </tbody>
  </table>
  <table class="table" align="right">
    <tbody>
      <tr>
        <td>2
        </td>
      </tr>
      <tr>
        <td>Bananas
        </td>
      </tr>
    </tbody>
  </table>
  <p></p>
</div>

此外，Maximillian 在他关于您似乎正在使用的 align 属性的帖子中提出了一个很好的观点。它不再用于 HTML5。相反，要么给你的表 float: left。像这样:

.table {
  width: 48%;
  margin: 1% !important;
  background: red;
  border-spacing: 20px;
  table-layout: fixed;
  float: left;
}
.outerdiv {
  border: 1px solid rgb(164, 164, 164);
  border-radius: 8px;
  background: transparent linear-gradient(rgb(255, 255, 255), rgb(222, 222, 222)) repeat scroll 0% 0%;
  clear: both;
  display: inline-block;
}

<div class="outerdiv">
  <table class="table">
    <tbody>
      <tr>
        <td>4
        </td>
      </tr>
      <tr>
        <td>Apples
        </td>
      </tr>
    </tbody>
  </table>
  <table class="table">
    <tbody>
      <tr>
        <td>2
        </td>
      </tr>
      <tr>
        <td>Bananas
        </td>
      </tr>
    </tbody>
  </table>
  <p></p>
</div>