Question

第一个例子是我网站的基本设置。任何人都可以告诉我为什么粘性标题在滚动表格中消失了？我在示例2中使用相同的CSS和脚本，标题不会移动一英寸。是div.right还是div.box导致问题？

HTML：

<div class="container">
  <div class="sidebar">
   <div class="right">
    <div class="box"> 
      <table class="tablesorter" cellspacing="1">
       <thead>
        <tr>
         <th>first name</th>
         <th>last name</th>
         <th>age</th>
         <th>total</th>
         <th>discount</th>
         <th>date</th>
       </tr>
      </thead>
      <tbody>
       <tr>
        rows.......
       </tr>
     </tbody>
    </table>        
   </div>
  </div>
 </div>
</div>

CSS：

.box {background: #F2F5A9 ;
padding: 15px; 
}

.right {   
max-width: 1300px;
min-width: 600px; 
padding-left: 220px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.sidebar {
position: absolute;
left: 20px;
top: 40px;
width: 200px;
background:#989898;
}

.container {    
padding: 0px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*************
Default Theme
*************/
/* overall */
.tablesorter {
    width: 100%!important;
    font: 12px/18px Arial, Sans-serif;
    color: #333;
    background-color: #fff;
    border-spacing: 0;
    margin: 10px 0 15px;
    text-align: left;
}

/* header */
.tablesorter th,
.tablesorter thead td {
    font: bold 12px/18px Arial, Sans-serif;
    color: #000;
    background-color: #fff;
    border-collapse: collapse;
    border-bottom: #ccc 2px solid;
    padding: 0;
}

.internal {font-weight:normal!important;}

.tablesorter tfoot th,
.tablesorter tfoot td {
    border: 0;
}
.tablesorter .header,
.tablesorter .tablesorter-header {
    background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
    background-position: center right;
        background-color:#8CB3D9;
    background-repeat: no-repeat;
    cursor: pointer;
    white-space: normal;
    padding: 4px 20px 4px 4px;
}

#table4 > thead > tr > td.tablesorter-header {color:#fff;background:#222;}

.tablesorter thead .headerSortUp,
.tablesorter thead .tablesorter-headerSortUp,
.tablesorter thead .tablesorter-headerAsc {
    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
    border-bottom: red 2px solid;
}
.tablesorter thead .headerSortDown,
.tablesorter thead .tablesorter-headerSortDown,
.tablesorter thead .tablesorter-headerDesc {
    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
    border-bottom: red 2px solid;
}
.tablesorter thead .sorter-false {
    background-image: none;
    cursor: default;
    padding: 4px;
}

/* tfoot */
.tablesorter tfoot .tablesorter-headerSortUp,
.tablesorter tfoot .tablesorter-headerSortDown,
.tablesorter tfoot .tablesorter-headerAsc,
.tablesorter tfoot .tablesorter-headerDesc {
    border-top: #000 2px solid;
}

/* tbody */
.tablesorter td {
    background-color: #EFEFEF;
    border-bottom: #ccc 1px solid;
    padding: 4px;
    vertical-align: top;max-width:700px;
}

/* hovered row colors */
.tablesorter tbody > tr:hover > td,
.tablesorter tbody > tr.even:hover > td,
.tablesorter tbody > tr.odd:hover > td {
    background: #fff;
    color: #000;
}

/* table processing indicator */
.tablesorter .tablesorter-processing {
    background-position: center center !important;
    background-repeat: no-repeat !important;
        background-image: url('data:image/gif;base64,R0lGODlhFAAUAKEAAO7u7lpaWgAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAAFAAUAAACQZRvoIDtu1wLQUAlqKTVxqwhXIiBnDg6Y4eyx4lKW5XK7wrLeK3vbq8J2W4T4e1nMhpWrZCTt3xKZ8kgsggdJmUFACH5BAEKAAIALAcAAAALAAcAAAIUVB6ii7jajgCAuUmtovxtXnmdUAAAIfkEAQoAAgAsDQACAAcACwAAAhRUIpmHy/3gUVQAQO9NetuugCFWAAAh+QQBCgACACwNAAcABwALAAACE5QVcZjKbVo6ck2AF95m5/6BSwEAIfkEAQoAAgAsBwANAAsABwAAAhOUH3kr6QaAcSrGWe1VQl+mMUIBACH5BAEKAAIALAIADQALAAcAAAIUlICmh7ncTAgqijkruDiv7n2YUAAAIfkEAQoAAgAsAAAHAAcACwAAAhQUIGmHyedehIoqFXLKfPOAaZdWAAAh+QQFCgACACwAAAIABwALAAACFJQFcJiXb15zLYRl7cla8OtlGGgUADs=') !important;
}

/* Zebra Widget - row alternating colors */
.tablesorter tr.odd td {
    background-color: #dfdfdf;
}
.tablesorter tr.even td {
    background-color: #efefef;
}

/* Column Widget - column sort colors */
.tablesorter tr.odd td.primary {
    background-color: #bfbfbf;
}
.tablesorter td.primary,
.tablesorter tr.even td.primary {
    background-color: #d9d9d9;
}
.tablesorter tr.odd td.secondary {
    background-color: #d9d9d9;
}
.tablesorter td.secondary,
.tablesorter tr.even td.secondary {
    background-color: #e6e6e6;
}
.tablesorter tr.odd td.tertiary {
    background-color: #e6e6e6;
}
.tablesorter td.tertiary,
.tablesorter tr.even td.tertiary {
    background-color: #f2f2f2;
}

/* caption */
caption {
    background: #fff;
}

/* filter widget */
.tablesorter .tablesorter-filter-row td {
    background: #eee;
    border-bottom: #ccc 1px solid;
    line-height: normal;
    text-align: center; /* center the input */
    -webkit-transition: line-height 0.1s ease;
    -moz-transition: line-height 0.1s ease;
    -o-transition: line-height 0.1s ease;
    transition: line-height 0.1s ease;
}
/* optional disabled input styling */
.tablesorter .tablesorter-filter-row .disabled {
    opacity: 0.5;
    filter: alpha(opacity=50);
    cursor: not-allowed;
}
/* hidden filter row */
.tablesorter .tablesorter-filter-row.hideme td {
    /*** *********************************************** ***/
    /*** change this padding to modify the thickness     ***/
    /*** of the closed filter row (height = padding x 2) ***/
    padding: 2px;
    /*** *********************************************** ***/
    margin: 0;
    line-height: 0;
    cursor: pointer;
}
.tablesorter .tablesorter-filter-row.hideme .tablesorter-filter {
    height: 1px;
    min-height: 0;
    border: 0;
    padding: 0;
    margin: 0;
    /* don't use visibility: hidden because it disables tabbing */
    opacity: 0;
    filter: alpha(opacity=0);
}
/* filters */
.tablesorter .tablesorter-filter {
    width: 95%;
    height: auto;
    margin: 4px;
    padding: 4px;
    background-color: #fff;
    border: 1px solid #bbb;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: height 0.1s ease;
    -moz-transition: height 0.1s ease;
    -o-transition: height 0.1s ease;
    transition: height 0.1s ease;
}

/* ajax error row */
.tablesorter .tablesorter-errorRow td {
    cursor: pointer;
    background-color: #e6bf99;
}

.tablesorter, .tablesorter-filter {
    width: auto;
}

Answer 1

你需要

 tablesorter {
    /* width: 100%!important; */ remove or comment
    font: 12px/18px Arial, Sans-serif;
    color: #333;
    background-color: #fff;
    border-spacing: 0;
    /* margin: 10px 0 15px; */
    text-align: left;
    }

tableorter粘贴标题的css问题移出列

1 个答案: