在table-cell元素中设置百分比宽度，而不指定表元素

Question

众所周知，百分比宽度是相对于表元素的。但是如果我没有指定表元素呢？我尝试将width:1%设置为table-cell元素，这很奇怪填充包装元素的大小。但是当我设置width:100%时，似乎它没有改变任何东西。背后的原因是什么？匿名表元素＆＃是什么？ 39;实际宽度？

＆＃13;

＆＃13;

.wrap{
  background:red;
}
.cell{
  display:table-cell;
  width:1%;
  background:green;
}

＆＃13;

<div class="wrap">
  <div class="cell">content in here.</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您无法更改不存在的元素的宽度。

使用<td>元素渲染不带<table>的页面。

查看页面的源代码。

<td>元素不存在，只是其内容。

WHATWG's specification定义了<td>可以在<tr>中使用，而<thead>可以在<tbody>，<tfoot>，{{1}中使用}或<table>。

  

4.9.9 td元素

     

可以使用此元素的上下文：

     

作为tr元素的孩子。

<td>没有<tr>（和<tr>没有<table>）是无效的HTML，您正在浏览浏览器的实施。

大多数浏览器意味着：

<table> <td> Text </td> </table>

呈现给：

<table> <tbody> <tr> <td> Text </td> </tr> </tbody> </table>

但

<tr> <td> Text </td> </tr>

呈现给：

Text

Answer 2

这就是我的想法：

将具有table-cell属性的元素视为<td>元素，那么，表格单元格的100％宽度是多少？通常情况下，您可以通过以百分比定义整个宽度（或将值保留为默认值）来获得。因此，通过降低数字，您迫使元素的行为不像单元格。

希望对你有意义。