与 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>

有人可以向我解释如何让所有值列具有相同的空间宽度吗？

附： 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.