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

Question

从这里可能看不出我正在尝试创建如下表所示的内容:

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

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

header 占据 40% 的 row width，content 占据 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 是邪恶的。但。他们在这里工作得很好。你为什么不做...

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