它可能不是由這一點，我想創建類似下面的表格是顯而易見的：如何用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/

相關問題