Воспользоваться дисплей таблицы ячейки процент ширины

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. Вероятно, вы также можете уйти, не поставляя width на своих .group2 p элементах.

Это должно работать: http://jsfiddle.net/6Kn88/2/

Answer 2

Установите ul в display: table в соответствии с остальной частью вашего CSS, а также придать ему ширину 100%, чтобы заполнить родительский DIV. Теперь ваши ширины должны захватывать ваши «ряды» и «ячейки».

Редактировать: Согласно kpeatt, выше, кто был быстрее с меткой!

Answer 3

Я нашел лучший способ установить ширину таблицы 100% таблицы из исходного кода начальной загрузки.

Комплект width:10000px, он визуализируется как 100% ширина.

https://jsfiddle.net/y3qsxb9m/

Answer 4

Для

display: table-cell; 

заходящего

width:10000px; 

выступил

width:100%; 

Итак, если вы хотите 50% ширины просто использовать

width: 5000px;