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

我认为您可以将表头位置对表格进行绝对处理，并将表格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%;"。附上工作副本。

＆＃13;

$.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>')
        });
    }

＆＃13;

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

＆＃13;

将表头定位在固定位置

2 个答案: