填写表格单元的百分比宽度

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%; 
}