Question

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

我尝试将table-layout:fixed;添加到.table，因为有些网站推荐了我。我还将border-collapse:separate;设置为表格单元格。

如何正确地将背景放在桌子后面？

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

只需将display: inline-block添加到outerdiv课程即可。这将正确地将表包装在父div内。像这样：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

首先，HTML中不推荐使用align属性，因此我会使用CSS align而不是float。其次，如果你使用浮点数并希望你的div扩展以包围它的内容，你还需要一个清除它们的元素 - 在这种情况下我使用了div和clear: both，因为它＆＃ 39; s最直接，但也有更优雅的清算解决方案（有些使用伪元素）。

以下是正确包装在div中的表格的现场演示：

＆＃13;

.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;
}

＆＃13;

<div class="outerdiv">
  <table class="table" style="float: left;">
    <tbody>
      <tr>
        <td>4
        </td>
      </tr>
      <tr>
        <td>Apples
        </td>
      </tr>
    </tbody>
  </table>
  <table class="table" style="float: right;">
    <tbody>
      <tr>
        <td>2
        </td>
      </tr>
      <tr>
        <td>Bananas
        </td>
      </tr>
    </tbody>
  </table>
  <div style="clear: both;"></div>
  <p></p>
</div>

＆＃13;

Answer 3

如果有人遇到麻烦，因为Table块的宽度大于其父容器的宽度，我发现将固定宽度（例如//fm is FragmentManager // Fragment a is on the screen Fragment a = new A_Fragment() fm.beginTransaction() .remove(null /*no fragments in R.id.content*/) .add(R.id.content, aFragment, "fragment-a") .commit(); // user wants to go from A to B Fragment bFragment = new B_Fragment(); fm.beginTransaction() .remove(fm.findFragmentById(R.id.content)) .add(R.id.content, bFragment, "fragment-b") .addToBackStack("a") .commit(); // user wants to go from B to C fm.beginTransaction() .remove(fm.findFragmentById(R.id.content)) .add(R.id.content, new C_Fragment(), "fragment-c") .commit();）添加到父容器会使表正确调整大小。

如果仍然需要在容器上使用width: 100px或类似的容器，则可以这样使用：

width: 100%

CSS：与DIV容器重叠的对齐表

3 个答案: