在表单元格元素中设置百分比宽度，而不指定表元素

Set percentage width in a table-cell element without specify the table elemen

本文关键字：元素 单元格 表单 设置 百分比      更新时间：2023-09-26
众所周知

，百分比宽度是相对于表元素的。但是，如果我不指定表元素怎么办？我尝试将width:1%设置为表单元格元素，它奇怪地填充了包装元素的大小。但是当我设置width:100%时，似乎它没有改变任何东西。这背后的原因是什么？匿名表元素的实际宽度是多少？

.wrap{
  background:red;
}
.cell{
  display:table-cell;
  width:1%;
  background:green;
}
<div class="wrap">
  <div class="cell">content in here.</div>
</div>

不能更改不存在元素的宽度。

呈现具有 <td> 元素的页面，而不带<table> 。

查看页面的源代码。

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

WHATWG的规范定义了<td>可用于<tr>，而又可用于<thead>，<tbody>，<tfoot>或<table>。

4.9.9 td元素

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

作为 tr 元素的子元素。

没有<tr>的<td>(和没有<table>的<tr>(不是有效的HTML，您依赖于浏览器的实现。

对于大多数浏览器，这意味着：

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

渲染到：

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

但

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

渲染到：

Text

这就是它在我脑海中的工作方式：

将具有 table-cell 属性的元素视为<td>元素，那么，表格单元格的 100% 宽度是多少？通常，这类似于通过以百分比形式定义全宽(或将值保留为默认值(来获得。因此，通过降低数字，您可以强制元素的行为不那么像单元格。

希望这对你有意义。

相关文章：