将元素的宽度乘以多个列的“跨度”

Question

我正在尝试使用基本的html表结构制作日历工具，并使用段落元素作为日历条目。这些条目的持续时间将存储为数据库中的天数。

基本上它看起来像 这个

日历中的每个插槽的宽度都是40像素。每个插槽代表一天。 放置条目的td容器的CSS：

td.slot {
width: 40px;
max-width: 40px;
margin: 0px;
vertical-align: top;
white-space: nowrap;
border-style: solid;
border-color: #d6d8db;
border-width: 1px;
-webkit-box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.04);
-moz-box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.04);
box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.04);
cursor: crosshair;
}

条目实际上只存在于单个TD中，但只是根据其持续时间（天数，一天为40px）溢出到其他TD中。 日历条目的CSS：

.order {
overflow: hidden;
text-align: left;
position: relative;
font-size: 10px;
font-family: Verdana, Geneva, sans-serif;
font-style: bold;
margin: 0px;
vertical-align: top;
height: 16px;
border-style: solid;
border-color: #989BA2;
border-width: 1px;
}

从数据库输入获取天数后，我尝试乘以40：

  

$ duration = $ data ['duration'] * 40;

在段落元素中设置CSS：

<p style="width: '.$duration.'px;">Description and stuff</p>

正如您所看到的那样，它无法正确缩放 containers。

我认为这是因为边界或其他东西，因此每天缺少2px，使其缩放不正确。

但是，将其设置为

  

$ duration = $ data ['duration'] * 42;

它仍然无法正确缩放。而且持续时间越长，问题就越严重。

最近的修正是将其设置为某些小数，如$ data ['duration'] * 42.3。 但感觉很脏。

我尝试过使用100％*持续时间。 我已经尝试过设置box-sizing：border-box 内容框等，在每个或每个上面。

仍然没有一致的解决方法。如果它可以工作多天，那么在较短的持续时间内会很麻烦。反过来说。