Spraw, aby szerokość wyświetlanych komórek tabeli była równa

Question

Fiddle

Mam ten stół w porządku, używając nieuporządkowanej listy. Ale nie mogę wymyślić, jak uzyskać komórki tabeli o szerokości 50% (chcę, aby każdy wiersz miał szerokość 100%). Powodem, dla którego używam display: table-row; i display: table-cell;, jest możliwość pionowego wyrównania danych, jeśli tekst parametru zawiera więcej niż jedną linię. Nie chcę używać rzeczywistej wartości piksela lub em dla szerokości, ponieważ, cóż, chcę ją w procentach, jeśli jest to możliwe. Wolałbym zrezygnować z wyrównania w pionie. Proszę nie javascript. Dzięki!

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

jesteś prawie tam. Musisz tylko dodać display: table i width: 100% do swojego ul.group2. Prawdopodobnie możesz również uniknąć dostarczania elementów width na swoich elementach .group2 p.

To powinno działać: http://jsfiddle.net/6Kn88/2/

Answer 2

Ustaw ul do display: table zgodnie z resztą swojej CSS, i nadać jej szerokość 100%, aby wypełnić div nadrzędnej. Teraz twoje szerokości powinny zająć twoje "wiersze" i "komórki".

Edytuj: Jak na kpeatt powyżej, kto był szybszy od znaku!

Answer 3

Znalazłem najlepszy sposób na ustawienie div komórki tabeli 100% szerokości z kodu źródłowego bootstrap.

Zestaw width:10000px, renderowany jako 100% szerokość.

https://jsfiddle.net/y3qsxb9m/

Answer 4

Dla

display: table-cell; 

zachodzącego

width:10000px; 

działał jako

width:100%; 

Tak więc, jeśli chcesz 50% szerokości wystarczy użyć

width: 5000px;