将表格标题放置在固定位置

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>