html - CSS 定位 : Same width in percent, 但一个 div 似乎变小了

Question

所以我有一个问题，希望你能帮我解决这个问题，因为我没有想法:

我尝试创建一个基于 html/css 的菜单(我希望它是正确的......也许“菜单”是更好的英语？对不起，这里是德语)，到目前为止效果很好，但有一点我无法弄清楚我的 CSS 中的缺陷。

为了让事情更清楚，我在这里创建了一个 fiddle :[已删除，图片清楚:)]

所以在 fiddle 中你会看到“days”行，css-class .day 的百分比宽度与我的 menu-cssclass 相同。

这是相应的CSS:

.a4 .days td div {
                color: #ffffff;
                font-size: 20px;
                padding: 6px 0 4px;
                text-align: center;
                display: inline-block;
                width: 14.28%;
                border-right: 2px solid white;
                box-sizing: border-box;
                font-family: 'OpenSans_SemiBold';
            }

...和

.a4 .menu-item {
        width: 14.28%;
        float: left;
        vertical-align: top;
        margin-bottom: 5px;
    }

所以我认为菜单和日期字段会正确对齐。但遗憾的是，正如在 fiddle 中看到的那样，我的计划越接近“星期天”，菜单和一天结束的矩形之间的空间就越小。

我希望这里有人可以帮助我，因为在尝试改变位置之后:相对于绝对和其他一些想法，我现在没有想法并且显然需要帮助。

编辑:这是来自评论的截图，更好地描述了我的问题!实际上，我希望所有字段看起来像“星期一”，图片和“星期一”结尾之间的边距相同 - 标题(抱歉我的英语不好):

Answer 1

在这一行删除 colspan="2"

<tr class="content">
    <td class="hspace border-color">              
        <td class="border-color" colspan="2"> <--- here

原因是您的表格行的宽度不同，“days”行是 1174px，“content”行是 1204px，所以宽度的 14.28% 给出了两个不同的值