在不指定表格元素的情況下在表格單元格元素中設置百分比寬度

Question

眾所周知，百分比寬度是相對於table元素的。但是，如果我不指定table元素呢？我嘗試將width:1%設置為table-cell元素，這奇怪地填充了包裝器的尺寸但是當我設置width:100% ，似乎什么都沒有改變。這背后的原因是什么？匿名表格元素的實際寬度是多少？

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

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

Answer 1

您不能更改不存在的元素的寬度。

渲染具有<td>元素且沒有<table> 。

看一下頁面的源代碼。

<td>元素不存在，僅是其內容。

WHATWG的規范定義了<td>可以在<tr>中使用，而反過來又可以在<thead> ， <tbody> ， <tfoot>或<table> 。

4.9.9 td元素

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

作為tr元素的子元素。

沒有<tr> <td> （和沒有<table>的<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％寬度是多少？ 通常，就像通過定義百分比的完整寬度（或將值保留為默認值）所得到的那樣。 因此，通過降低數字，您將迫使元素的行為不像單元格。

希望對您有意義。