https://eportal.enlinx.com/test/rates.php 是我正在构建的网络工具，但我无法让显示正常工作。我希望这三列在标题外观的底部边框下方显示表格。想法是在这三个主要列中的每一个中都有两列的表格，因为每种运输方式的结果将显示在类型名称右侧的列中。奇怪的是，表格看起来的距离与表格中的行数成正比？
这是 HTML 和 CSS 文件：
（HTML）：
<?php
include 'rates_header.php';
// Rates Calculation Call
?>
<!-- Header-type bar for freight calculation input -->
<div id="inputBar">
<!-- Warehouse List -- JUST Salt Lake City for now (store as address) -->
<span>
<p>Warehouse</p>
<select>
<option id="warehouse">Enlinx -- Salt Lake City</option>
</select>
</span>
<!-- Country >> Fill by database query? * Choose one default country for now! -->
<span>
<p>Country</p>
<select>
<option id="country">US</option>
</select>
</span>
<!-- City -->
<span>
<p>City</p>
<input id="city" type="text" value="Seattle" />
</span>
<!-- State -->
<span>
<p>State</p>
<select>
<option id="state">WA</option>
</select>
</span>
<!-- Zipcode of Destination -->
<span>
<p>Zip</p>
<input type="text" id="zipcode" value="98115" />
</span>
<!-- Weight of Package -->
<span>
<p>Weight</p>
<input type="text" id="weight" value="2.00" />
</span>
<!-- Method -->
<span>
<p>Method</p>
<select>
<option value="commercial">Commercial</option>
<option value="residential">Residential</option>
</select>
</span>
<!-- Dimensions -->
<span>
<p>Dimensions in inches (LxWxH)</p>
<input type="text" id="length" /> x <input type="text" id="width" /> x <input type="text" id="height" />
</span>
</div>
<!-- Freight Results Body && Shipping-type selection -->
<div id="freightBody">
<div id="FedExDiv">
<span class='caption'>
<h3>FedEx</h3>
</span>
<table> <!--... Third Party Billing options LEFT OUT -- what do with? -->
<tr>
<th><span class='service'>FedEx 2Day Commercial</span></th>
<th><span class='result' id='FedEx2DayCommercialResult'></span></th>
</tr><br />
<tr>
<th><span class='service'>FedEx 2Day Residential</span></th>
<th><span class='result' id='FedEx2DayResidentialResult'></span></th>
</tr><br />
<tr>
<th><span class='service'>FedEx 2Day</span></th>
<th><span class='result' id='FedEx2DayResult'></span></th>
</tr><br />
<tr>
<th><span class='service'>FedEx Economy Puerto Rico Collect</span></th>
<th><span class='result' id='FedExEconomyPuertoRicoCollectResult'></span></th>
</tr><br />
<tr>
<th><span class='service'>FedEx Economy Puerto Rico Pre-Paid</span></th>
<th><span class='result' id='FedExEconomyPuertoRicoPre-PaidResult'></span></th>
</tr><br />
<tr>
<th><span class='service'>FedEx Express Saver</span></th>
<th><span class='result' id='FedExExpressSaverResult'></span></th>
</tr><br />
<tr>
<th><span class='service'>FedEx Ground</span></th>
<th><span class='result' id='FedExGroundResult'></span></th>
</tr><br />
<tr>
<th><span class='service'>FedEx International Collect</span></th>
<th><span class='result' id='FedExInternationalCollectResult'></span></th>
</tr><br />
<tr>
<th><span class='service'>FedEx International Economy</span></th>
<th><span class='result' id='FedExInternationalEconomyResult'></span></th>
</tr><br />
<tr>
<th><span class='service'>FedEx International Pre-Paid</span></th>
<th><span class='result' id='FedExInternationalPre-PaidResult'></span></th>
</tr><br />
<tr>
<th><span class='service'>FedEx International Priority</span></th>
<th><span class='result' id='FedExInternationalPriorityResult'></span></th>
</tr><br />
<tr>
<th><span class='service'>FedEx Priority Overnight</span></th>
<th><span class='result' id='FedExPriorityOvernightResult'></span></th>
</tr><br />
<tr>
<th><span class='service'>FedEx Priority Puerto Rico Collect</span></th>
<th><span class='result' id='FedExPriorityPuertoRicoCollectResult'></span></th>
</tr><br />
<tr>
<th><span class='service'>FedEx Priority Puerto Rico Pre-Paid</span></th>
<th><span class='result' id='FedExPriorityPuertoRicoPre-PaidResult'></span></th>
</tr><br />
<tr>
<th><span class='service'>FedEx Saturday Priority</span></th>
<th><span class='result' id='FedExSaturdayPriorityResult'></span></th>
</tr><br />
<tr>
<th><span class='service'>FedEx SmartPost</span></th>
<th><span class='result' id='FedExSmartPostResult'></span></th>
</tr><br />
<tr>
<th><span class='service'>FedEx Standard Overnight</span></th>
<th><span class='result' id='FedExStandardOvernightResult'></span></th>
</tr><br />
</table>
</div>
<div id="UPSDiv">
<span class='caption'>
<h3>UPS</h3>
</span>
<table>
<tr>
<th><span class='service'>UPS 2nd Day Air</span></th>
<th><span class='result' id='UPS2ndDayAirResult'></span></th>
</tr><br />
<tr>
<th><span class='service'>UPS 2nd Day Air Puerto Rico</span></th>
<th><span class='result' id='UPS2ndDayAirPuertoRicoResult'></span></th>
</tr><br />
<tr>
<th><span class='service'>UPS 3Day Select</span></th>
<th><span class='result' id='UPS3DaySelectResult'></span></th>
</tr><br />
<tr>
<th><span class='service'>UPS Ground</span></th>
<th><span class='result' id='UPSGroundResult'></span></th>
</tr><br />
<tr>
<th><span class='service'>UPS Ground Residential</span></th>
<th><span class='result' id='UPSGroundResidentialResult'></span></th>
</tr><br />
<tr>
<th><span class='service'>UPS International</span></th>
<th><span class='result' id='UPSInternationalCollectResult'></span></th>
</tr><br />
<tr>
<th><span class='service'>UPS International Pre-Paid</span></th>
<th><span class='result' id='UPSInternationalPre-PaidResult'></span></th>
</tr><br />
<tr>
<th><span class='service'>UPS Next Day Air</span></th>
<th><span class='result' id='UPSNextDayAirResult'></span></th>
</tr><br />
<tr>
<th><span class='service'>UPS Next Day Air Saver</span></th>
<th><span class='result' id='UPSNextDayAirSaverResult'></span></th>
</tr><br />
<tr>
<th><span class='service'>UPS Worldwide Expedited</span></th>
<th><span class='result' id='UPSWorldwideExpeditedResult'></span></th>
</tr><br />
<tr>
<th><span class='service'>UPS Worldwide Express</span></th>
<th><span class='result' id='UPSWorldwideExpressResult'></span></th>
</tr><br />
<tr>
<th><span class='service'>UPS Worldwide Express Collect</span></th>
<th><span class='result' id='UPSWorldwideExpressCollectResult'></span></th>
</tr><br />
<tr>
<th><span class='service'>UPS Worldwide Express Plus</span></th>
<th><span class='result' id='UPSWorldwideExpressPlusResult'></span></th>
</tr><br />
<tr>
<th><span class='service'>UPS Worldwide Express Plus Collect</span></th>
<th><span class='result' id='UPSWorldwideExpressPlusCollectResult'></span></th>
</tr><br />
<tr>
<th><span class='service'>UPS Worldwide Saver</span></th>
<th><span class='result' id='UPSWorldwideSaverResult'></span></th>
</tr><br />
<tr>
<th><span class='service'>UPS Worldwide Saver Collect</span></th>
<th><span class='result' id='UPSWorldwideSaverCollectResult'></span></th>
</tr><br />
</table>
<input id='calculateButton' class='button' type='button' value='Save Money!' />
</div>
<!-- jQuery: Handle button -->
<script>
$(document).ready(function() {
$('#calculateButton').click(function() {
var input = [];
var service_class = document.getElementsByClassName('service');
// Get the shipment info
input[0] = 'ARIIX';
input[1] = $('#country').val();
input[2] = $('#state').val();
input[3] = $('#city').val();
input[4] = $('#zipcode').val();
input[5] = $('#weight').val();
// Grab all the service types
for(var i = 0; i < service_class.length; i++)
input.push(service_class[i].innerText);
console.log(input);
// AJAX POST back to this page with the results of the freight request
/*
$.post("calc.php", {input: input}, function(data) {
//var response = JSON.parse(data);
//alert(data.indexOf('<ERROR>'));
// Make sure valid values were entered for all fields!
if (data.indexOf('<ERROR>') != -1)
alert(data);
else
{
alert(data);
//console.log(response);
}
//$('#UPSWorldwideSaverCollectResult').append(data);
});
*/
$.ajax({
type: 'POST',
url: "calc.php",
data: {input: input},
success: function(data) {
//var response = JSON.parse(data);
//alert(response[0].valueOf());
console.log(data);
alert(data);
},
failure: function(data) {
alert(data);
}
});
});
});
</script>
<div id="USPSDiv">
<span class='caption'>
<h3>USPS</h3>
</span>
<table>
<tr>
<th><span class="service">USPS Best Way Cost</span></th>
<th><span class='result' id='USPSBestWayCostResult'></span></th>
</tr><br />
<tr>
<th><span class="service">USPS Express Mail</span></th>
<th><span class='result' id='USPSExpressMailResult'></span></th>
</tr><br />
<tr>
<th><span class="service">USPS First Class Mail</span></th>
<th><span class='result' id='USPSFirstClassMailResult'></span></th>
</tr><br />
<tr>
<th><span class="service">USPS Media Mail</span></th>
<th><span class='result' id='USPSMediaMailResult'></span></th>
</tr><br />
<tr>
<th><span class="service">USPS Parcel Post Mail</span></th>
<th><span class='result' id='USPSParcelPostMailResult'></span></th>
</tr><br />
<tr>
<th><span class="service">USPS Priority Mail</span></th>
<th><span class='result' id='USPSPriorityMailResult'></span></th>
</tr><br />
</table>
</div>
</div>
<?php include 'footer.php'; ?>
（CSS）：
#container
{
position: absolute;
height: 100%;
width: 100%;
}
.header
{
position: relative;
height: 20%;
width: 100%;
}
#logo
{
position: relative;
float: left;
height: 100%;
width: 20%;
background: white url('logo.png') no-repeat center;
background-size: 100%;
}
.Body
{
display: table;
position: absolute;
height: 80%;
width: 100%;
background-color:Gainsboro;
}
#inputBar
{
border-top: 2px solid;
border-bottom: 2px solid;
overflow: hidden;
white-space: nowrap;
text-align: center;
margin: 0 auto;
background-color: DarkGray;
}
#freightBody
{
height: 95%;
width: 100%;
font-size: 115%;
background-color: Gainsboro;
}
#FedExDiv
{
float: left;
height: 100%;
width: 32%;
margin-left: 1%;
background-color: blue;
}
#UPSDiv
{
float: left;
height: 100%;
width: 32%;
margin-left: 1%;
}
#USPSDiv
{
float: left;
height: 100%;
width: 32%;
margin-left: 1%;
}
span
{
display:table;
float: left;
margin-right: 1%;
margin-left: 1%;
text-align: center;
}
.service { background-color:red; }
.result { height: 5%; width: 10%; background-color: white; }
.row
{
height: 5%;
width: 35%;
}
{
font-weight: bold;
}
.button
{
width:20%;
height: 10%;
margin: 0 25% 0 25%;
}
.caption
{
float: left;
width: 100%;
background-color: white;
font-weight: bold;
font-size: 120%;
border-bottom: 2px solid;
}
在过去半小时左右的时间里，我一直坐着查看我的 CSS，并试图在谷歌上搜索一些相关的内容，但到目前为止我什么也没有，我看不出我做错了什么。
有任何想法吗？
注意：我忘了提及 - HTML 和 BODY 标记以及 DOC COMMENT 包含在包含的页眉/页脚 PHP 文件中。可能很明显，但我只是想确保我提到了这一点。