静态表格标题
[英]Static Table Header
问题描述
固定表头有些麻烦。 在滚动时，它需要变得固定并跟随表格直到通过。
哪个有效...
但是，克隆的固定标头th的宽度都是错误的，这会破坏布局，您将在这里看到它的工作： 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);
});
});
1 个解决方案
解决方案1
0 2018-03-21 10:53:44
您可以在此处阅读有关position:sticky 信息 ，该文档正是您想要的。 它尚未在所有地方实现，但正如您在此处看到的那样，它在所有设备中的比例为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 WK</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>
Bootstrap 3-静态表头实现
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.