javascript - 静态表头

Question

固定表格标题有一些问题。在滚动时它需要固定并跟随表格直到它通过。

哪个有效...

但是，克隆的固定标题的宽度都是错误的并且破坏了布局，你会看到它在这里工作: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>&nbsp;</th>
                                    <th>&nbsp;</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>&mdash;</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>&mdash;</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>&mdash;</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>&mdash;</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>&mdash;</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>&mdash;</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>&mdash;</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);
         });
        });

Answer 1

你可以阅读关于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>