html - フローティング ダウンする HTML テーブル

Question

https://eportal.enlinx.com/test/rates.php は、私が構築している Web ツールですが、表示が正しく機能しません。3 つの列で、ヘッダーのように見える部分の下の境界線のすぐ下にテーブルを表示する必要があります。各配送方法の結果がタイプ名の右側の列に表示されるため、これらの 3 つのメイン列のそれぞれに 2 列のテーブルを配置することを考えています。テーブルの行数に比例してテーブルが浮いているように見えるのは奇妙なことですか?

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;
}

この 30 分ほど、CSS を座って調べ、関連するものを Google で検索しようとしましたが、これまでのところ何も得られておらず、何が間違っていたのかわかりません。

何か案は？

注: 言及するのを忘れていました - HTML および BODY タグと DOC COMMENT は、ヘッダー/フッターの PHP ファイルに含まれています。おそらく明らかですが、それについて言及したことを確認したかっただけです。