我想在滚动时修复 html-table 的标题，以便它始终对用户可见。我正在尝试使用在网络上找到的 js 脚本来执行此操作。
但是我无法解决所有高度对齐的问题。它们按内容排序。事实证明，在屏幕截图中。行中单元格的高度不同（为了清楚起见，我特意用颜色突出显示了它）。
你能告诉我如何平衡所有的高度吗？平庸的东西，比如身高：汽车；或高度：100%；没有帮助。
这里还需要写一些东西：
'height': $(th).outerHeight(true) + 'px'
告诉我具体是什么？谢谢你。
这是html：
<table id="table-flats" class="fixtable">
<tr>
<th><span><a name="flats"></a><code class="html"><br />Кол-во<br /> комнат</code></span></th>
<th data-th=", Характеристики"><code>Р-н</code></th>
<th><code class="html"> Адрес</code></th>
<th><code class="html">Метро</code></th>
<th><code class="html">Эт</code></th>
<th><code class="html">S <br /><br />о<br />б<br />щ</code></th>
<th><code class="html">S <br /><br />к<br />о<br />м<br />н</code></th>
<th><code class="html">S<br /><br />к<br />у<br />х</code></th>
<th><code class="html">Т<br />е<br />л</code></th>
<th><code class="html">М<br />е<br />б</code></th>
<th><code class="html">Х<br />о<br />л</code></th>
<th><code class="html">С<br />т<br />М<br /> </code></th>
<th><code class="html"><strong>Цена</strong></code></th>
<th><code class="html">Срок</code></th>
<th><code class="html">Примечания</code></th>
</tr>
CSS：
.fixtable-fixed {
position: fixed;
top: 0;
z-index: 101;
background-color: #FCF8E4;
border-bottom: 1px solid #ddd;
}
这是覆盖滚动样式的js脚本：
function FixTable(table) {
var inst = this;
this.table = table;
$('tr > th',$(this.table)).each(function(index) {
var div_fixed = $('<div/>').addClass('fixtable-fixed');
var div_relat = $('<div/>').addClass('fixtable-relative');
div_fixed.html($(this).html());
div_relat.html($(this).html());
$(this).html('').append(div_fixed).append(div_relat);
$(div_fixed).hide();
});
this.StyleColumns();
this.FixColumns();
$(window).scroll(function(){
inst.FixColumns()
}).resize(function(){
inst.StyleColumns()
});
}
FixTable.prototype.StyleColumns = function() {
var inst = this;
$('tr > th', $(this.table)).each(function(){
var div_relat = $('div.fixtable-relative', $(this));
var th = $(div_relat).parent('th');
$('div.fixtable-fixed', $(this)).css({
'width': $(th).outerWidth(true) - parseInt($(th).css('border-left-width')) + 'px',
'height': $(th).outerHeight(true) + 'px',
'left': $(div_relat).offset().left - parseInt($(th).css('padding-left')) + 'px',
'padding-top': $(div_relat).offset().top - $(inst.table).offset().top + 'px',
'padding-left': $(th).css('padding-left'),
'padding-right': $(th).css('padding-right')
});
});
}
FixTable.prototype.FixColumns = function() {
var inst = this;
var show = false;
var s_top = $(window).scrollTop();
var h_top = $(inst.table).offset().top;
if (s_top < (h_top + $(inst.table).height() - $(inst.table).find('.fixtable-fixed').outerHeight()) && s_top > h_top) {
show = true;
}
$('tr > th > div.fixtable-fixed', $(this.table)).each(function(){
show ? $(this).show() : $(this).hide()
});
}
$(document).ready(function(){
$('.fixtable').each(function() {
new FixTable(this);
});
});
</script>
您可以使用
position: sticky;它，但它的支持是马马虎虎 → https://caniuse.com/#search=sticky
如果您已经进入脚本，那么它更容易：a）扔掉定位nafig。b) 在表格的滚动条上，为
tr标题添加样式更改，特别是transform:translateY(...).这些方面的东西：
HTML：
JS：