Horizontally align div with display: table-cell - html

Question

I have a table with bars in it. I use display: table-cell in order to align the contents at the bottom. The problem is that the container divs no longer align horizontally over their corresponding THs (their width is not set)
Here is a jsFiddle that shows the problem

Answer 1

The Problem
The problem when using the table-cell-attribute is that it behaves like "a real table cell" and no more like a block- or inline-element. When the parent elements table-rowand table are missing they are generated anonymously. So the box will loose all the things like margin.
You can read more about this here: "Tables in the visual formatting model"
I rebuild your HTML structure a little and this seems to work fine:
DEMO
http://jsfiddle.net/insertusernamehere/XPSQG/
CSS
<style>
#graph th {
background: red;
}
#graph td {
min-width: 30px;
margin: 0;
padding: 0;
color: #222222;
}
#graph div {
display: block;
position: relative;
margin: 0 auto;
width: 30px;
max-width: 30px;
height: 100px;
background-color: #EFEFEF;
border: 1px solid #000000;
}
#graph span {
position: absolute;
left: 0;
top: -20px;
width: 100%;
color: #222222;
font-size: 16px;
line-height: 16px;
text-align: center;
}
#graph p.color {
position: absolute;
right: 0;
bottom: 0px;
width: 100%;
margin: 0;
color: #222222;
}
#graph p.color.c1 {
background: #0f0;
}
#graph p.color.c2 {
background: blue;
}​
</style>
HTMl
<div id="graph">
<table>
<tr>
<td><div><p class="color c1" style="height:20px;"><span>1</span></p></div></td>
<td><div><p class="color c2" style="height:30%;"><span>2</span></p></div></td>
<td><div><p class="color c1" style="height:40%;"><span>3</span></p></div></td>
<td><div><p class="color c2" style="height:50%;"><span>4</span></p></div></td>
</tr>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>Some long value</th>
</tr>
</table>
</div>
How it works
It basically places the content (green percentage <p>-tags) of the columns on the bottom. To have the numbers on top of that you can easily place them within the <p>-tag and them "move them out" again. This is done by this part:
top: -20px;
font-size: 16px;
line-height: 16px;
This says that the line-height and the font size are 16px. It would be enough to set top: -16px to move it out completely - the additional 4px add a nice padding. :)
Hope you get the idea.
Note
Somewhere you used this attribute:
countunit="0_1_0"
As this is not valid HTML please use the data-prefix:
data-countunit="0_1_0"
This is valid HTML5 and it also won't cause any trouble in older browsers.

Answer 2

There is a trick to center horizontally an element with display: table-cell inside another element.
Say the surrounding element has the class .table-wrapper and the inner element has .table-cell. Use the following CSS:
.table-wrapper {
display: table;
width: 100%;
text-align: center;
}
.table-cell {
vertical-align: middle;
}
This way you center the text or whatever you want inside .table-cell vertically and also horizontally.