填寫表格單元的百分比寬度

Question

如何使元素佔用表格單元格的百分比寬度？當我試圖做一個百分比，比如70％時，它會比包含的單元格增長得多。 70％應該比含有細胞更小！這是我的頁面的一個準系統示例。對於我想要做的某些分層來說，絕對定位是必要的。

HTML

<table> 
<tr> 
    <td> 
    <div>hello</div> 
    </td> 
    <td> 
    <div>world</div> 
    </td> 
</tr> 
</table> 

CSS

td { 
position: relative; 
width: 10em; 
} 

div { 
position: absolute; 
width: 70%; 
} 

Answer 1

馬特·鮑爾的評論讓我在正確的軌道上。這是一些額外的標記。

HTML

<table> 
<tr> 
    <td> 
    <div class="container"> 
    <div class="bar">hello</div> 
    </div> 
    </td> 
    <td> 
    <div class="container"> 
    <div class="bar">world</div> 
    </div> 
    </td> 
</tr> 
</table> 

CSS

td { 
width: 10em; 
} 

.container { 
position: relative; 
} 

.bar { 
position: absolute; 
width: 70%; 
}