表格

Question

关于HTML表格中子元素的缩放，我有一个我不明白的问题。

从头开始，我的目标是要有一个表，并使用z-index在div上覆盖表主体。如果颜色正确，则表似乎处于非活动状态，因此无法单击它。

在下面，您将找到一个因其他一些要求而看起来像的最小示例。如您所见，overlay div始终会缩放到整个表格，而不仅仅是整个表格的一部分。无论是tbody的子代还是一个单元格的子代（如示例代码中所示）-我认为也许不允许div作为tbody的直接子代，但我可以在每个表单元格中放置一个overlay div ）。

table {
  border: 1;
  border-color: blue;
}

#content {
  position: relative;
}

#content * {
  position: inherit;
}

#overlay {
  top: 0;
  left: 0;
  /*bottom: 0;
  right: 0;*/
  position: absolute !important;
  background: rgba(0, 0, 0, .4);
  z-index: 3;
  width: 100%;
  height: 100%
}

<div id="content">
  <div>
    Some stuff before
  </div>
  <br>
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div>
            Cell
          </div>
          <div id="overlay"></div>
        </td>
        <td>Cell</td>
      </tr>
      <tr>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
      <tr>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>Footer 1</td>
        <td>Footer 2</td>
      </tr>
    </tfoot>
  </table>
  <br>
  <div>
    Some stuff after
  </div>
</div>

我不明白为什么会发生这种情况，这使我很难思考解决办法，希望有人可以帮助我并提供解释。

欢呼

Answer 1

您的表格单元格也需要设置为position: relative。代替#content *而是直接使用td或至少使用#content td进行设置。

td {
  position: relative;
}

#overlay {
  top: 0;
  left: 0;
  position: absolute;
  background: rgba(0, 0, 0, .4);
  z-index: 3;
  width: 100%;
  height: 100%
}

<div id="content">
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div>
            Cell
          </div>
          <div id="overlay"></div>
        </td>
        <td>Cell</td>
      </tr>
      <tr>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>Footer 1</td>
        <td>Footer 2</td>
      </tr>
    </tfoot>
  </table>
</div>

---

那为什么行得通呢？

简短的回答：position不是inheritable，Chrome浏览器的表格标签存在一些问题。

但这只是真相的一半。所有主要的浏览器（经过Chrome，Firefox和IE11测试）都允许大多数（或什至全部）属性从其父级继承。在Firefox或IE11中测试代码段时，您会发现它确实有效。那为什么不在Chrome中呢？

事实证明，Chrome在table-*显示模式和表格标签本身方面存在一些问题。继承时，它始终使用默认的position值（static）。即使最接近的父级设置了position: relative，也不会如下一个代码段所示那样起作用。

因此可以得出结论：最好始终显式设置position: relative，并且在大多数情况下，最好避免一起使用inherit。

main {
  position: relative;
  border: 2px solid #000;
  width: 200px;
  margin-bottom: 20px;
}

table, .fake-table {
  min-height: 50px;
  margin: 10px;
}

table, tr, td, .fake-table div {
  position: inherit;
}

.relative {
  position: relative;
}

em {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  min-width: 100px;
  height: 100%;
  background: rgba(166, 199, 252, .9);
  text-shadow: 0 0 10px #fff;
}

.fake-table .table {
  display: block;
}

.fake-table .row {
  display: flex;
  justify-content: flex-start;
}

.fake-table .cell {
  display: inline-block;
  min-width: 40px;
}

<main>
  <table>
    <tr>
      <td>...</td>
      <td>
        cell
        <em>Starting point (inherited table)</em>
      </td>
    </tr>
  </table>
</main>

<main>
  <table>
    <tr class="relative">
      <td>...</td>
      <td>
        cell
        <em>Parent is set to relative</em>
      </td>
    </tr>
  </table>
</main>

<main class="fake-table">
  <table class="table">
    <tr class="row">
      <td class="cell">...</td>
      <td class="cell">
        cell
        <em>Table tags in different display mode</em>
      </td>
    </tr>
  </table>
</main>

<main class="fake-table">
  <div class="table">
    <div class="row">
      <div class="cell">...</div>
      <div class="cell">
        cell
        <em>Table using flex (behaves correctly)</em>
      </div>
    </div>
  </div>
</main>

<main>
  <table>
    <tr>
      <td>...</td>
      <td class="relative">
        cell
        <em>Expected rendering</em>
      </td>
    </tr>
  </table>
</main>