Position the header of the table in the fixed position

Question

I wanted to position the header of the table in the fixed position. the header of the table is somewhere near the bottom of the page. When the jquery get is succeeded, the header go up according to the data. So I want to position the header as a fixed position.

the output should be like this

I tried modifying the position for the thead but it does not work.

my code is found below...

html code

<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 code

$.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

I think you can make the header position absoluted to the table, and set the table position: absolute; right: 3%; top: 60%; position: absolute; right: 3%; top: 60%; to near the bottom of the page.

example like:

 $.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

I think you should add a <tbody> tag in your HTML table and while appending specify the <tbody> and then append your <tr> . Now in your code, I think the country is getting appended to <thead> and it's <tr> and that's why the header text is getting shifted. Also remove style="position:absolute;bottom:40%;right:3%;" . Attached a working copy.

 $.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>