如何使用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;
}

Answer 2

HTML：

<div class="top">
    <div class="layer left">
        <div class="header">header</div>
        <div class="content">content</div>
    </div>
    <div class="layer right">
        <div class="header">header</div>
        <div class="content">content</div>
    </div>

     <div class="clear"></div>
</div>

CSS：

div.clear
{
    clear: both;
}

div.layer
{
    float: left;
}

div.left
{
    width: 40%;
}

div.right
{
    width: 60%;
}

Answer 3

这样的事情怎么样：

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

.top {
    background: blue;
    width: 300px;
    padding: 0;
}
.layer {
    padding: 5px;
    background: green;
}
.header {
    padding: 1%;
    margin: 0;
    background: yellow;
    width: 38%;
    float: left;
}
.content {
    padding: 1%;
    margin: 0;
    background: red;
    width: 58%;
    float: right;
}
.clear {
    clear: both;
}

jsFiddle：http://jsfiddle.net/cdKJ3/1/

Answer 4

您可以将css更改为：

.top  {
    position:relative;
    background:blue;
    width:200px;
}
.layer {padding:5px;
    background:green;
}
.header {
    position:absolute;
    left:0px;
    display:table-cell;
    background:yellow;
    width:40%;
}
.content {
    position:absolute;
    right:0px;
    display:table-cell;
    background:red;
    width:60%;
}

更新了小提琴：http://jsfiddle.net/yVScW/2/