为什么当 `td` 在两个 div 中写入而一个设置为 `position: absolute` 和另一个 `position: relative` 时我不能在 td 中设置宽度？答案

【问题标题】：why I can't set width in td when `td` wrote in two div while one was set `position: absolute` and another `position: relative`?为什么当 `td` 在两个 div 中写入而一个设置为 `position: absolute` 和另一个 `position: relative` 时我不能在 td 中设置宽度？
【发布时间】：2017-06-27 01:59:45
【问题描述】：

就像标题一样，我不能在这样的特定环境中设置tdwidth，你可以看这里的演示http://codepen.io/quietcoder/pen/ygRVLB?editors=1100

.outer {
  position: relative;
  display: inline-block;
}
.inner {
  position: absolute;
}

<div class="outer">
  <div class="inner">
    <table>
      <tr>
        <td style="width: 100px">
          <div>123</div>
        </td>
        <td>
          <div>123</div>
        </td>
      </tr>
    </table>
  </div>
</div>

那么，如果我写两个表，td 的宽度就可以了，太棒了！你知道为什么会这样吗？

.outer {
  position: relative;
  display: inline-block;
}
.inner {
  position: absolute;
  white-space: nowrap;
}
.inline-block-box {
  display: inline-block;
}

<div class="outer">
  <div class="inner">
    <div class="inline-block-box">
      <table>
        <tr>
          <td style="width: 100px">
            <div>123</div>
          </td>
          <td>
            <div>123</div>
          </td>
        </tr>
      </table>
    </div>
    <div class="inline-block-box">
      <table>
        <tr>
          <td style="width: 100px">
            <div>123</div>
          </td>
          <td>
            <div>123</div>
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>

如果你在devtool中查看div.inner的宽度属性，你会发现宽度很有趣…… 能解释一下吗？

【问题讨论】：

Why does CSS td width not work?的可能重复
不是同一个问题，我在这个页面找不到我的答案。
@quietcoder 您现在正在更改问题。在第二个 sn-p 中，.inner div 的 CSS 与第一个不同。如果删除它，表格将再次折叠。
@MrLister 是的，你是对的。我在工作的时候发现了这个奇怪的问题，你知道这是什么原因吗？
嗯。不，我没有更多的答案，抱歉。我又做了一些测试，但没有结果。

标签： html css

【解决方案1】：

首先你必须为表格设置宽度，然后td 将被调整大小

    .outer {
      position: relative;
      display: inline-block;
    }
    .inner {
      position: absolute;
    }

<div class="outer">
      <div class="inner">
        <table style="width: 200px">
          <tr>
            <td style="width: 100px">
              <div>123</div>
            </td>
            <td>
              <div>123</div>
            </td>
          </tr>
        </table>
      </div>
    </div>

【讨论】：

谢谢您的回答，您知道这是什么原因吗？
因为您在.inner 中有绝对位置，所以容器本身必须有width。那么当你将width 添加到表中时它会修复它

【解决方案2】：

因为你

.inner {
  position: absolute;
}

.outer {
  position: relative;
  display: inline-block;
}

<div class="outer">
  <div class="inner">
    <table>
      <tr>
        <td style="width: 100px; background-color: red;">
          <div>123</div>
        </td>
        <td>
          <div>123</div>
        </td>
      </tr>
    </table>
  </div>
</div>

【讨论】：

【解决方案3】：

在表格内，width 将始终被视为建议而非绝对。
现在在这种情况下，表的父级的宽度是不确定的（因为它是绝对定位的，并且在带有inline-block 的 div 内）所以表不知道它可以有多宽。所以它不会使自己比它的内容更广泛。

如果绝对 div 有指定的宽度，那么表格就会知道它的单元格可以有多宽。

.outer {
  position: relative;
  display: inline-block;
}
.inner {
  position: absolute;
  width:150px; /* added */
}

<div class="outer">
  <div class="inner">
    <table>
      <tr>
        <td style="width: 100px">
          <div>123</div>
        </td>
        <td>
          <div>123</div>
        </td>
      </tr>
    </table>
  </div>
</div>

或者，当然，设置表格本身的宽度。

【讨论】：

【解决方案4】：

您可以给表格边框以像这样查看 TD 的宽度或高度

.inner {
  position: absolute;
}
.inner {
  position: absolute;
}

<div class="outer">
  <div class="inner">
    <table border='1'>
      <tr>
        <td style="width: 100px">
          <div>123</div>
        </td>
        <td>
          <div>123</div>
        </td>
      </tr>
    </table>
  </div>
</div>

【讨论】：

我不明白你的问题，请清楚地告诉你你想要什么？您可以按样式设置宽度，td 属性也可以将宽度设置为如下所示
我不是OP，但问题是在原始问题中，最左边的td仅与其内容一样宽，而不是指定的100px，OP的问题是为什么会发生这种情况.你的回答改变了一些事情，但不一定是 OP 可以改变的事情。
如果你想设置所有的 TD width = "100px" 所以使用可以像这样使用 css td{ width: "100px"; }
Used this Code It Set td 你可以指定

123

123

【解决方案5】：

我认为这是以下因素的综合：

外部 div 是 inline-block，这意味着它的宽度为零
内部 div 受限于外部 div 的宽度
表格有它自己的布局管理，它试图适应它的容器

因此，除非您设置表格/内部/外部的宽度，否则表格单元格将保持窄。

【讨论】：