与div表等宽的间距

Question

我试图弄清楚为什么我的div表中的第一列比其他列有更多的空间。考虑到我将相同的CSS同样应用于所有列，我不明白它有什么特别之处。我试图为所有列保持相同的相等宽度。但看看我有什么：

我的目标是在Value1，Value 2，Value3和Value 4之间保持相同的空间。这是我的CSS及其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;
}

我做了研究，这就是div表的制作方法。根据我见过的例子，它们都具有相同的间距，但为什么我的一列比其余的更大？我不明白我的CSS中的Value 1列有什么特别之处这是我的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>

有人可以向我解释如何保持所有Value列的空间宽度相同吗？

P.S。 Value1的CSS没有任何自己的间距，它只是定义字体和颜色：

.textlargedarkblue{font-family: Verdana, Geneva, sans-serif;font-size:16px; color:darkblue; font-weight: bold}

Value2..Value4相同所以不应该成为问题。

Answer 1

该列正在扩展以适合您的Info: $1.00行。你应该把它放在一个div或一个单独的东西，因为它不是表的一部分。或者将该行设为不同的类，并为其删除display: table-row;。

Answer 2

我的诚实意见是你应该使用表格来解决这个问题......他们已经创建了表格内容。

<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