將表格標題放置在固定位置

Question

我想將表的標題放置在固定位置。 表格的標題位於頁面底部附近。 jQuery get成功后，標題將根據數據上升。 所以我想將標題放置在固定位置。

輸出應該是這樣的

我嘗試修改thead的位置，但不起作用。

我的代碼在下面...

HTML代碼

<table id="topfivecountry" style="color:white;font-size:15px;">
            <thead style="position:absolute;bottom:40%;right:3%;">
                <tr>
                    <th>Top 5 countries</th>
                </tr>
            </thead>
        </table>

js代碼

$.get ({
        url:'getTopFiveCountry.php',
        dataType: 'text',
        success: getTopFive
    });



function getTopFive(val) {
        var countryArray = val.split('\n');
        //country is the argument that is being passed by the forEach to the callback function
        countryArray.forEach(function(country){
            $('#topfivecountry').append('<tr><td>'+country+'</td></tr>')
        });
    }

Answer 1

我認為您可以使表頭位置絕對到表，並設置表position: absolute; right: 3%; top: 60%; position: absolute; right: 3%; top: 60%; 到頁面底部附近。

像這樣的例子：

 $.get({ url:'getTopFiveCountry.php', dataType: 'text', success: getTopFive }); var $tbody = $('#topfivecountry tbody'); getTopFive('a\\nb\\nc\\n'); function getTopFive(val) { var countryArray = val.split('\\n'); //country is the argument that is being passed by the forEach to the callback function countryArray.forEach(function(country){ $tbody.append('<tr><td>'+country+'</td></tr>') }); } 

 #topfivecountry { width: 150px; background-color: red; position: absolute; top: 60%; right: 3%; padding-top: 30px; } .thead { height: 30px; position:absolute; top: 0; left: 0; } .content { } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="topfivecountry" style="color:white;font-size:15px;"> <thead class="thead" style=""> <tr> <th>Top 5 countries</th> </tr> </thead> <tbody class="content"> </tbody> </table> 

Answer 2

我認為您應該在HTML表中添加<tbody>標記，並在追加時指定<tbody> ，然后追加<tr> 。 現在在您的代碼中，我認為國家/地區將被附加到<thead> ，並且是<tr> ，這就是標題文本被移動的原因。 同時刪除style="position:absolute;bottom:40%;right:3%;" 。 附上工作副本。

 $.get ({ url:'getTopFiveCountry.php', dataType: 'text', success: getTopFive }); getTopFive('a\\nb\\nc\\n'); function getTopFive(val) { var countryArray = val.split('\\n'); //country is the argument that is being passed by the forEach to the callback function countryArray.forEach(function(country){ $('#topfivecountry > tbody:last-child').append('<tr><td>'+country+'</td></tr>') }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="topfivecountry" style="font-size:15px;"> <thead > <tr> <th>Top 5 countries</th> </tr> </thead> <tbody> </tbody> </table>