它可能不是由这一点，我想创建类似下面的表格是显而易见的：如何用CSS模拟表格行宽百分比？

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>

来源

2011-05-04 Andrew

所以，是的。表是邪恶的。但。他们在这里工作很棒。你为什么不只是做...

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

来源

2011-05-04 01:06:43

+1。如果你有一张信息表，那么你有一张桌子。表格非常适合显示表格数据。为什么对于这么多人来说这是一个如此大的问题？ – 2011-05-04 01:08:41

@Matthew就是我的感觉。谢谢。 – 2011-05-04 01:09:50

虽然有一个建议，你可以通过使用''而不是''来为标题项目完全消除这些类。然后每个部分都有自己的标签类型，并可以基于此标签进行定位。这也有更多的语义正确的好处。 – 2011-05-04 01:15:49

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

来源

2011-05-04 01:08:58 Marty

怎么样像这样：

<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/

来源

2011-05-04 01:13:18 mc10

您可以将您的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/

来源

2011-05-04 01:18:51 LostLin

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

回答

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

相关问题