使用固定表标题时出现问题。在滚动时，它需要固定并按照表格直到它已经过去。
哪个有用...
但是，克隆的固定标题宽度都是错误的并且关闭了布局，你会看到它在这里工作：https://jsfiddle.net/93g2etfj/2/
任何想法都会很棒！
HTML：
<div class="section group mb-margin">
<div class="col span_12_of_12">
<div class="panel table-panel">
<table class="table-full">
<thead>
<tr>
<th>Reference No.</th>
<th>Quote Date</th>
<th>Pickup</th>
<th>Journey Date</th>
<th>Price</th>
<th>Status</th>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>673-727-2744</td>
<td>28 Jan 2018</td>
<td>London WC2H</td>
<td>08 Aug 2018</td>
<td>63</td>
<td class="row-status row-green">Completed</td>
<td class="edit-row"><a href="#"><div></div></a></td>
<td class="delete-row"><div>—</div></td>
</tr>
<tr>
<td>673-727-2744</td>
<td>28 Jan 2018</td>
<td>London WC2H</td>
<td>08 Aug 2018</td>
<td>63</td>
<td class="row-status row-orange">Quoted</td>
<td class="edit-row"><a href="#"><div></div></a></td>
<td class="delete-row"><div>—</div></td>
</tr>
<tr>
<td>673-727-2744</td>
<td>28 Jan 2018</td>
<td>London WC2H</td>
<td>08 Aug 2018</td>
<td>63</td>
<td class="row-status row-blue">On Hold</td>
<td class="edit-row"><div></div></td>
<td class="delete-row"><div>—</div></td>
</tr>
<tr>
<td>673-727-2744</td>
<td>28 Jan 2018</td>
<td>London WC2H</td>
<td>08 Aug 2018</td>
<td>63</td>
<td class="row-status row-red">Cancelled</td>
<td class="edit-row"><div></div></td>
<td class="delete-row"><div>—</div></td>
</tr>
<tr>
<td>673-727-2744</td>
<td>28 Jan 2018</td>
<td>London WC2H</td>
<td>08 Aug 2018</td>
<td>63</td>
<td class="row-status row-green">Completed</td>
<td class="edit-row"><a href="#"><div></div></a></td>
<td class="delete-row"><div>—</div></td>
</tr>
<tr>
<td>673-727-2744</td>
<td>28 Jan 2018</td>
<td>London WC2H</td>
<td>08 Aug 2018</td>
<td>63</td>
<td class="row-status row-blue">On Hold</td>
<td class="edit-row"><div></div></td>
<td class="delete-row"><div>—</div></td>
</tr>
<tr>
<td>673-727-2744</td>
<td>28 Jan 2018</td>
<td>London WC2H</td>
<td>08 Aug 2018</td>
<td>63</td>
<td class="row-status row-grey">Failed</td>
<td class="edit-row"><div></div></td>
<td class="delete-row"><div>—</div></td>
</tr>
</tbody>
</table>
<!-- Close table-->
</div>
<!-- Close .panel-->
</div>
<!-- Close .col-->
</div>
<!-- Close .group-->
CSS
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 0% 0 0% 3%;
}
.mb-margin {
margin-bottom:60px;
}
.panel {
width:100%;
height:auto;
background: $white;
border: 1px solid #CFD5E6;
-webkit-box-shadow: 0 3px 2px 0 rgba(214,221,226,0.51);
-moz-box-shadow: 0 3px 2px 0 rgba(214,221,226,0.51);
box-shadow: 0 3px 2px 0 rgba(214,221,226,0.51);
@include border-radius(5px);
}
.table-panel {
overflow: auto;
overflow-y: hidden;
}
/* * * * * * * * * * * * * * * * * * * * */
/* FULL TABLE STYLING */
/* * * * * * * * * * * * * * * * * * * * */
.table-full {
width:100%;
height:auto;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
white-space: nowrap;
}
.table-full thead th {
padding: 25px;
text-align: left!important;
font-family: arial;
font-size: 12px;
color: $darker;
letter-spacing: 0px;
}
.table-full tbody td {
border: solid 1px grey;
padding: 0px;
vertical-align:middle;
padding:25px;
font-family: arial;
font-size: 14px;
color: $dark;
letter-spacing: 0;
&:first-child {
font-family: arial;
}
}
.table-full tbody tr {
background-color: white;
@include transition(all,.10s);
cursor:pointer;
&:hover {
background-color: blue;
}
}
.table-full tbody td {
border-left: none;
border-right: none;
}
.fixed-table-wrap {
max-width:100%;
height:auto;
display:block;
margin:0px auto 0px auto;
padding:0px;
}
.fixed{
top:0;
position:fixed;
width:100%;
display:none;
border:none;
background:white;
border-bottom: solid 1px grey;
}
JS：
;(function($) {
$.fn.fixMe = function() {
return this.each(function() {
var $this = $(this),
$t_fixed;
function init() {
$this.wrap('<div class="fixed-table-wrap" />');
$t_fixed = $this.clone();
$t_fixed.find("tbody").remove().end().addClass("fixed").insertBefore($this);
resizeFixed();
}
function resizeFixed() {
$t_fixed.find("th").each(function(index) {
$(this).css("width",$this.find("th").eq(index).outerWidth()+"px");
});
}
function scrollFixed() {
var offset = $(this).scrollTop(),
tableOffsetTop = $this.offset().top,
tableOffsetBottom = tableOffsetTop + $this.height() - $this.find("thead").height();
if(offset < tableOffsetTop || offset > tableOffsetBottom)
$t_fixed.hide();
else if(offset >= tableOffsetTop && offset <= tableOffsetBottom && $t_fixed.is(":hidden"))
$t_fixed.show();
}
$(window).resize(resizeFixed);
$(window).scroll(scrollFixed);
init();
});
};
})(jQuery);
$(document).ready(function(){
$("table").fixMe();
$(".up").click(function() {
$('html, body').animate({
scrollTop: 0
}, 2000);
});
});
答案 0 :(得分：0)
您可以阅读position:sticky here，这完全符合您的要求。它尚未在任何地方实施，但正如您所看到的here，它在86.41％的所有设备上都可用。
演示：
dt {
background: #B8C1C8;
border-bottom: 1px solid #989EA4;
border-top: 1px solid #717D85;
color: #FFF;
margin: 0;
padding: 2px 0 0 12px;
position: -webkit-sticky;
position: sticky;
top: -1px;
}<div>
<dl>
<dt>A</dt>
<dd>Andrew W.K.</dd>
<dd>Apparat</dd>
<dd>Arcade Fire</dd>
<dd>At The Drive-In</dd>
<dd>Aziz Ansari</dd>
</dl>
<dl>
<dt>C</dt>
<dd>Chromeo</dd>
<dd>Common</dd>
<dd>Converge</dd>
<dd>Crystal Castles</dd>
<dd>Cursive</dd>
</dl>
<dl>
<dt>C</dt>
<dd>Chromeo</dd>
<dd>Common</dd>
<dd>Converge</dd>
<dd>Crystal Castles</dd>
<dd>Cursive</dd>
</dl>
<dl>
<dt>E</dt>
<dd>Explosions In The Sky</dd>
</dl>
<dl>
<dt>T</dt>
<dd>Ted Leo & The Pharmacists</dd>
<dd>T-Pain</dd>
<dd>Thrice</dd>
<dd>TV On The Radio</dd>
<dd>Two Gallants</dd>
</dl>
<dl>
<dt>T</dt>
<dd>Ted Leo & The Pharmacists</dd>
<dd>T-Pain</dd>
<dd>Thrice</dd>
<dd>TV On The Radio</dd>
<dd>Two Gallants</dd>
</dl>
<dl>
<dt>T</dt>
<dd>Ted Leo & The Pharmacists</dd>
<dd>T-Pain</dd>
<dd>Thrice</dd>
<dd>TV On The Radio</dd>
<dd>Two Gallants</dd>
</dl>
</div>