为什么宽度为 75% 的 table 比总宽度为 99% 的三个 table 宽？

Question

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

HTMLTable1 (width="33%") + HTMLTable2 (width="33%") + HTMLTable3 (width="33%")

我下面有一个 table，宽度为 75:

HTMLTable（宽度=“75%”）|

如您所见：

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

为什么“75”比“99”宽，如何让它占用更少的宽度？

更新

基于 IBJ 的 fiddle，我在前三个 table 中使用了以下内容（tblTravelerInfo、tblTopMiddle 和 tblTopRight）：

<table class="toptables">

...以及下面 table 中的以下内容 (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;
}

...使用此空格键：

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

...它只是稍微好一点 - 底部 table 比前三个宽一点...???

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 link https://jsfiddle.net/2qu9edb0/

为什么宽度为 75% 的 table 比总宽度为 99% 的三个 table 宽？

Why is a table with width of 75% wider than three tables which total 99%?

html

html-table

width

spacebars

更新