,百分比宽度是相对于表元素的。但是,如果我不指定表元素怎么办?我尝试将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% 宽度是多少?通常,这类似于通过以百分比形式定义全宽(或将值保留为默认值(来获得。因此,通过降低数字,您可以强制元素的行为不那么像单元格。
希望这对你有意义。