为什么宽度比三个表宽75％的表总共99％？

Question

我在页面上有三个HTMLTables，第二个在第一个的右边，第三个在第二个的右边：

HTMLTable1（width =“33％”）+ HTMLTable2（width =“33％”）+ HTMLTable3（width =“33％”）

我下面有一张宽度为75的桌子：

HTMLTable（width =“75％”）|

正如你在这里看到的那样：

......单个表比其他三个表宽。

为什么“75”比“99”更宽，我怎样才能让它占用更少的宽度？

更新

基于IBJ的小提琴，我在前三个表（tblTravelerInfo，tblTopMiddle和tblTopRight）中使用了以下内容：

<table class="toptables">

...以及下表中的以下内容（tblExpenseDescription）：

<table class="middletable" border="1">

...用这个CSS：

.container{
    width: 100%;
}
.toptables{
    width:33%;
    float:left;
    margin-right:1px;
    border: 0;
}
.middletable{
    width:75%;
    float:left;
}

......使用此SpaceBars：

<div class="container">
{{> tblTravelerInfo}}
{{> tblTopMiddle}}
{{> tblTopRight}}
{{> tblExpenseDescription}}
</div>

......它只是略微好一点 - 底部的桌子比前三个稍微宽一点...... ???

Answer 1

您应该将上表的容器的设置设置为100％。

Answer 2

宽度百分比基于标记位于其中的容器。 因此，如果这些容器不同，则百分比会有所不同。

我不确定您的HTML结构如何，但这样的结果会为您提供所需的结果。

CSS

.container{
    width:100%;
}

.box{
    width:33%;
    height:50px;
    background-color:blue;
    float:left;
    margin-right:1px;
}
.bottombox{
    width:75%;
    height:50px;
    background-color:green;
    float:left;
}

HTML                                                                                  

JSFIDDLE链接 https://jsfiddle.net/2qu9edb0/