Equal width spacing with div table - html

Question

I am trying to figure out why I keep having first column in my div table have more space than the rest of the columns. I don't understand what is so special about it considering I apply the same CSS to all columns equally. I am trying to keep the same equal width for all columns. But look what I have:
My goal is to have the same equal space between Value1, Value 2, Value3 and Value 4. Here is my CSS and its HTML:
.Table2
{
display: table;
background:white;
}
.Row2
{
display: table-row;
}
.Cell3
{
display: table-cell;
white-space:nowrap;
padding-left: 5px;
padding-right: 5px;
}
.Cell4
{
display: table-cell;
white-space:nowrap;
padding-left: 5px;
padding-right: 5px;
border-top:1px solid;
}
.Cell5
{
display: table-cell;
white-space:nowrap;
padding-left: 5px;
padding-right: 5px;
border-bottom:1px solid;
}
I did the research and this is how div tables are made. According to examples I've seen, they all had the same equal spacing, but why am I having one column with greater space than the rest? I don't understand what is so special about Value 1 column in my CSS This is my HTML:
<div class="Table2">
<div class="Row2">
<div class="Cell3">
<p><font class="textlargedarkblue"> Info: </font> <font class="textTotalPrice1"> $1.00</font></p>
</div>
</div>
<div class="Row2">
<div class="Cell4">
<p><font class="textsmalldarkblue"> Value1 </font></p>
</div>
<div class="Cell4">
<p><font class="textsmall"> Value2 </font></p>
</div>
<div class="Cell4">
<p><font class="textsmall"> Value3 </font></p>
</div>
<div class="Cell4">
<p><font class="textlittle">Value4 </font></p>
</div>
</div>
</div>
Could somebody explain to me how I can keep all Value columns have the same space width?
P.S. The CSS for Value1 is not having any spacing of its own, it's simply defining font and color:
.textlargedarkblue{font-family: Verdana, Geneva, sans-serif;font-size:16px; color:darkblue; font-weight: bold}
Same for Value2..Value4 So that shouldn't be the problem.

Answer 1

That column is stretching to fit your Info: $1.00 line. You should put that in a div or something separate, since it isn't part of the table. Or make that row a different class and remove the display: table-row; for it.

Answer 2

My honest opinion is that you should use table's for this matter... they're created to display tabular content.
<table>
<tr>
<th colspan="4">Info: <span>$1.00</span></th>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
</tr>
</table>
CSS:
table {
border: 0;
border-collapse: collapse;
}
table th {
padding: 0 5px;
text-align: left;
}
table td {
border-top: 1px solid black;
}
DEMO.