CODEWITHSUNDEEP
htmlcss
dezman
dezman

Reputation: 19358

Make display table-cell use percentage width

Fiddle

I've got this table feel going, using an unordered list. But I can't figure out how to get the table-cells to have 50% width (I want each row to be 100% width). The reason I am using display: table-row; and display: table-cell; is so that I can vertical-align the data if the parameter text is more than one line. I don't want to use an actual pixel or em value for the width, because, well, I just want it in percentage if its possible. I would rather give up the vertical-align. Please no javascript. Thanks!

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

Upvotes: 40

Views: 80294

Answers (5)

kpeatt
kpeatt

Reputation: 769

You're almost there. You just need to add display: table and width: 100% to your ul.group2. You could probably also get away with not supplying a width on your .group2 p elements.

This should work: http://jsfiddle.net/6Kn88/2/

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 ul {
    display: table;
    width: 100%;
}
.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;
}
<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>
    <span class="clear"></span>
</div>

Upvotes: 50

Stepan Rafael
Stepan Rafael

Reputation: 415

Use the following:

  display:table-cell;
  width: 100vw;

Upvotes: 1

Raja Kota
Raja Kota

Reputation: 17

For 

display: table-cell;

setting 

width:10000px;

acted as 

width:100%;

So, If you want 50% of width just use 

width: 5000px;

Upvotes: -8

yandong
yandong

Reputation: 53

I found the best way to set table-cell div 100% width from bootstrap source code.

Set width:10000px, it rendered like 100% width.

https://jsfiddle.net/y3qsxb9m/

Upvotes: 1

John
John

Reputation: 3415

Set the ul to display: table in accordance with the rest of your CSS, and give it a width of 100% to fill the parent div. Now your widths should take hold for your "rows" and "cells".

Edit: As per kpeatt, above, who was quicker off the mark!

Upvotes: 9

Related Questions