如何使用CSS模拟表格行宽度百分比？

Question

由此可能并不明显,我正在尝试创建类似下表的内容:

http://jsfiddle.net/yVScW/1/

|     40%       |          60%        |
______________________________________
|----header----|---------content------|
|----header----|---------content------|
______________________________________

我们的想法是标题占据行宽的40%,每行占行宽的60%.

这是我在CSS中的最佳近似值,但不起作用:

.top  {padding:5px;background:blue; width:200px;}
.layer {padding:5px;background:green;}
.header {padding:5px;background:yellow; width:40%;display:inline;}
.content {padding:5px;background:red; width:60%;display:inline;}

使用此HTML:

<div class="top">
    <p class="layer">
        <div class="header">header</div>
        <div class="content">content</div>
    </p>
    <p class="layer">
        <div class="header">header</div>
        <div class="content">content</div>
    </p>
</div>

Answer 1

是的.桌子很邪恶.但.他们在这里很棒.你为什么不这样做......

<table class="top">
<tr class="layer">
<th>
header
</th>
<td class="content">
content
</td>
</tr>
</table>

并将您的样式更改为:

.top  {
   padding:5px;
   background:blue; 
   width:200px;
 }
.layer {
   padding:5px;
   background:green;
}
th {
   padding:5px;
   background:yellow;
   width:40%;
   display:inline;
}
.content {
   padding:5px;
   background:red; 
   width:60%;
   display:inline;
}