使顯示錶格使用百分比寬度

Question

Fiddle

我已經有了這種表感覺，使用無序列表。但我不知道如何讓表格單元具有50％的寬度（我希望每行都是100％的寬度）。我使用display: table-row;和display: table-cell;的原因是，如果參數文本不止一行，我可以垂直對齊數據。我不想在寬度上使用實際的像素或em值，因爲，如果可能的話，我只是希望它以百分比表示。我寧願放棄垂直對齊。請不要JavaScript。謝謝！

HTML：

<div class="group group2"> 
    <h2>Health Indicies</h2> 
    <ul> 
     <li><p class="parameter">GGP</p><p class="data">265</p></li> 
     <li><p class="parameter">Comfort</p><p class="data">blah</p></li> 
     <li><p class="parameter">Energy</p><p class="data">gooo</p></li> 
    </ul> 
</div> 

CSS：

ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
.group { 
    width: 50%; 
    margin-bottom: 20px; 
    outline: 1px solid black; 
    background: white; 
    box-shadow: 1px 1px 5px 0px gray; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
.group h2 { 
    display: block; 
    font-size: 14px; 
    background: gray; 
    text-align: center; 
    padding: 5px; 
} 
.group li { 
    clear: both; 
} 
.group p { 
    padding: 3%; 
    text-align: center; 
    font-size: 14px; 
} 
.group2 li { 
    display: table-row; 
} 
.group2 p { 
    display: table-cell; 
    vertical-align: middle; 
    width: 46%; 
    border-bottom: 2px solid gray; 
} 
.group li:last-child p { 
    border-bottom: 0; 
} 

Answer 1

你幾乎沒有。您只需將display: table和width: 100%添加到您的ul.group2。你可能也可以逃脫不要在你的.group2 p元素上提供width。

這應該工作：http://jsfiddle.net/6Kn88/2/

Answer 2

設置ul到display: table按照你的CSS的休息，並給它100％的寬度，以填補父DIV。現在你的寬度應該佔據你的「行」和「單元格」。

編輯：按照上面的kpeatt，誰更快地脫穎而出！

Answer 3

我發現從引導源代碼中設置table-cell div 100％寬度的最佳方法。

設置爲width:10000px，它呈現爲100％的寬度。

https://jsfiddle.net/y3qsxb9m/

Answer 4

對於

display: table-cell; 

設置

width:10000px; 

充當

width:100%; 

所以，如果你想寬度的50％只使用

width: 5000px;