Question

我在网上发现了无数的Fixed Header表示例，并且在主题上发现了许多StackOverflow帖子，但还没有找到一个允许使用浏览器调整大小的动态宽度表。每当我尝试使宽度动态时，thead列将不会与tbody列对齐。这是我尝试的样本的一小部分：

jqGrid和数据表似乎有效，但我正在尝试使用Knockout构建一个表，并且更愿意避免这两个 - 我们实际上完全离开了jqGrid。

有人建议吗？

更新 - 我站着（或坐着）纠正了。 jQuery.floatThead does support dynamic width tables，标题列与窗口调整大小的正文列对齐。我猜第50次是魅力？我只是用overflow-x:hidden;隐藏了水平滚动条，并将表包装在div中，该插件由插件支持：

var $table = $('.myTable');
$table.floatThead({
    scrollContainer: function ($table) {
        return $table.closest('.wrapper');
    }
});

Answer 1

临时解决方案是在窗口调整大小

上多次调整表的大小

$(window).on('resize', function () {
    ResizeFloatThead();
});
ResizeFloatThead = function () {

    var interval = 500;
    for (var i = 0; i < 5; i++) {
        setTimeout(function () {
            $('.myTable').floatThead('reflow');
        }, interval);
        interval -= 100;
    };
};

Answer 2

我认为这是解决您问题的一个非常简单的方法。它涉及jquery。由于我对这个网站很陌生，我可能会误解，但是这里有。基本上在页面加载或调整大小时，jquery脚本检查每个最宽的头部和主体的列，然后将较窄的列调整为较宽的列。标题和主体的列在窗口调整大小时调整（偶尔滞后）。封闭的<div>使其更好用于我不知道的原因。如果我正在咆哮错误的树，请告诉我。请注意，php位只是我创建大量行和列的懒惰方式 - 对于脚本部分中的解决方案来说并不重要。

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<style>
p,th,td {
font-family:Arial;
}

td {
padding:10px;
}
tr#head {
    background-color:#fff;
    position:fixed;
    top:0;
    font-weight:bold;
}

</style>

<body>

<?php //make large table using php
$cols = 7; //how many columns
echo "
<div class='wrapper'>
<table class='tab'>
<tbody id='head'>
<tr id='head'>";
for($i=1;$i<=$cols;$i++){
  echo "<td>heading {$i}</td>";
}
echo "</tr></tbody><tbody id='body'>";
for($h=0;$h<=100;$h++){
  echo "<tr>";
  for($i=1;$i<=$cols;$i++){
    echo "
    <td>row {$h} column no. {$i}</td>";
   }
  echo "</tr>";
}

?>

</tbody>
</table>
</div>
<script>

jQuery(function($) {

$(window).resize(function() {
  tabcols();
});
$(document).ready(function() {
  tabcols();
});
});

function tabcols(){
 var cols = 7;
 var h = $("tr#head").height();
 $("tbody#body").find("tr:eq(0)").find("td").css("padding-top",h); //add extra space to keep the fixed header from obscuring top of body
 for(i=0;i<cols;i++){ //check each column for td width
 	 var tdsel = "td:eq(" + i + ")";
 	 var bodyw = $("tbody#body").find(tdsel).width();
 	 var headw = $("tbody#head").find(tdsel).width();
 	 if(bodyw > headw){
 	    $("tbody#head").find(tdsel).width(bodyw);
 	 } else {
 	    $("tbody#body").find(tdsel).width(headw);
 	 }
 }
};

</script>

</body></html>

固定表头有动态宽度表吗？

2 个答案: