我希望固定表头，并使用过滤器滚动表体
我想要固定表头，并且可以使用左侧的过滤器滚动表体（整个页面可滚动）保持主体和标题的对齐，其中宽度，填充和边距是百分比。还必须保持响应能力。
HTML
<div id="tabletop" class="col-sm-10 mail_view" style="margin-top: 28px;">
<div id="loadtable" style="position: relative;">
<table id="datatable" class="table table-striped dataTable no-footer" role="grid" aria-describedby="datatable_info" style="position: relative;">
<thead id="tablerecords" class="ranktablehead">
<tr role="row">
<th class="table-head aligncenter" style="width: 8%; color: #a6a5a5 !important;">SL NO</th>
<th class="sorting_asc aligncenter" id="Name" tabindex="0" aria-label="Name: activate to sort column ascending" aria-controls="datatable" rowspan="1" colspan="1" aria-sort="ascending" style="width: 17%; color:#a6a5a5;">
<span style="cursor:pointer" ng-click="changeSorting('Name')">NAME</span></th>
<th class="sorting aligncenter" id="Location" tabindex="0" aria-label="Location: activate to sort column ascending" aria-controls="datatable" rowspan="1" colspan="1" aria-sort="ascending" style="width: 13%; color:#a6a5a5;">
<span style="cursor:pointer" ng-click="changeSorting('Location')">LOCATION</span></th>
<th class="sorting aligncenter" id="City" tabindex="0" aria-label="City: activate to sort column ascending" aria-controls="datatable" rowspan="1" colspan="1" aria-sort="ascending" style="width: 12%; color:#a6a5a5;">
<span style="cursor:pointer" ng-click="changeSorting('City')">CITY</span></th>
<th class="sorting aligncenter" id="Region" tabindex="0" aria-label="Region: activate to sort column ascending" aria-controls="datatable" rowspan="1" colspan="1" aria-sort="ascending" style="width: 12%; color:#a6a5a5;">
<span style="cursor:pointer" ng-click="changeSorting('Region')">REGION</span></th>
<th class="sorting aligncenter" id="Country" tabindex="0" aria-label="Country: activate to sort column ascending" aria-controls="datatable" rowspan="1" colspan="1" aria-sort="ascending" style="width: 13%; color:#a6a5a5;">
<span style="cursor:pointer" ng-click="changeSorting('Country')">COUNTRY</span></th>
<th class="sorting aligncenter" id="World" tabindex="0" aria-label="World: activate to sort column ascending" aria-controls="datatable" rowspan="1" colspan="1" aria-sort="ascending" style="width: 12%; color:#a6a5a5;">
<span style="cursor:pointer" ng-click="changeSorting('World')">WORLD</span></th>
<th style="width: 12%;"></th>
<th style="width: 1%;"></th>
</tr>
<tr id="bulkrank" ng-show="selectall" class="rankerrecord" style="background-color: #356192;">
<td colspan="3" class="aligncenter" style="vertical-align: middle; font-size: 14px; width: 29%;">{{companySelected}} company(s) selected</td>
<td style="vertical-align: middle; font-size: 14px; width: 12%;" class="aligncenter">
<select class="backgroundColortextBox selectcard" ng-model="mass_rank_city" ng-selected={{mass_rank_city}}>
<option value="None">None</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td style="vertical-align: middle; font-size: 14px; width: 12%;" class="aligncenter">
<select class="backgroundColortextBox selectcard" ng-model="mass_rank_region">
<option value="None" selected="selected">None</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td style="vertical-align: middle; font-size: 14px; width: 13%;" class="aligncenter">
<select class="backgroundColortextBox selectcard" ng-model="mass_rank_country">
<option value="None" selected="selected">None</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td style="vertical-align: middle; font-size: 14px; width: 12%;" rowspan="{{item.locations.length}}" ng-hide="$index>0" class="aligncenter">
<select class="backgroundColortextBox selectcard " ng-model="mass_rank_world">
<option value="None" selected="selected">None</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td style="vertical-align: middle; font-size: 14px; width: 12%;" id="saveRankBorder{{item['Sl No']}}" rowspan="{{item.locations.length}}" ng-hide="$index>0" class="aligncenter">
<a class="rankersavecancel" ng-click="saveMassRanksRequest()" title="Save"><img src="/images/right.png" width="21" height="21"></a>
<a id="undo{{item['Sl No']}}" ng-click="undoMassRanks()" class="rankersavecancel" title='Undo' ng-disabled="false"><img src="/images/cross.png" width="21" height="21">
</a>
</td>
<td style=width:1% "></td>
</tr>
</thead>
<tbody id="tablecontent " ng-repeat="item in items track by $index " style=" ">
<tr class="rankerrecord " ng-repeat="member in item.locations " id="rowrank ">
<td rowspan="{{item.locations.length}} "
ng-hide="$index>0" ng-model="item.slno" class="rank-card-text-center" style="vertical-align: middle; font-size: 14px; width: 8%; color: #eeeeee;">{{item['Sl No']}}</td>
<td rowspan="{{item.locations.length}}" ng-hide="$index>0" ng-model="item.companyname" class="rank-card-text-center alignleft" style="vertical-align: middle; font-size: 14px; width: 17%; "><a data-toggle="modal" data-target="#myModal" ng-click="companyDetails(item._id, item.Name)" style="cursor: pointer; color: #3b88da !important;">{{item.Name}}</a></td>
<td class="" style="vertical-align: middle; font-size: 14px; width: 13%;" ng-model="member.location">{{member.location}}</td>
<td style="vertical-align: middle; width: 13%;" class="aligncenter">
<select class="backgroundColortextBox selectcard" ng-model="member.rank_city" ng-focus="saveinitial(item,member.rank_city,member.rank_region,member.rank_country,item.rank_world)">
<option ng-repeat="opt in item.values">{{opt.val}}</option>
</select>
</td>
<td style="vertical-align: middle; font-size: 14px; width: 12%;" class="aligncenter">
<select class="backgroundColortextBox selectcard" ng-model="member.rank_region" ng-focus="saveinitial(item,member.rank_city,member.rank_region,member.rank_country,item.rank_world)">
<option ng-repeat="opt in item.values">{{opt.val}}</option>
</select>
</td>
<td style="vertical-align: middle; font-size: 14px; width: 13%;" class="aligncenter">
<select class="backgroundColortextBox selectcard" ng-model="member.rank_country" ng-focus="saveinitial(item,member.rank_city,member.rank_region,member.rank_country,item.rank_world)">
<option ng-repeat="opt in item.values">{{opt.val}}</option>
</select>
</td>
<td style="vertical-align: middle; font-size: 14px; width: 13%;" rowspan="{{item.locations.length}}" ng-hide="$index>0" class="aligncenter">
<select class="backgroundColortextBox selectcard" ng-model="item.rank_world" ng-focus="saveinitial(item,member.rank_city,member.rank_region,member.rank_country,item.rank_world)">
<option ng-repeat="opt in item.values">{{opt.val}}</option>
</select>
</td>
<td style="vertical-align: middle; width: 12%;" rowspan="{{item.locations.length}}" ng-hide="$index>0" class="rank-card-text-center">
<a class="rankersavecancel" ng-click="saveranks(item)" title="Save"><img src="/images/right.png" width="21" height="21"></a>
<a id="undo{{item['Sl No']}}" ng-click="undoranks(item)" class="rankersavecancel" title='Undo' ng-disabled="false"><img src="/images/cross.png" width="21" height="21">
</a>
<input type="checkbox" id="{{item._id}}" ng-checked="{{item.isSelected}}" ng-click="removeObjectIdFromMasskRank(item,selectall)" class="rankersavecancel" />
</td>
<td style="width: 1%;" id="saveRankBorder{{item['Sl No']}}"></td>
</tr>
</tbody>
</table>
</div>
<div id="nopagination" style="margin: 0 auto; text-align: center"></div>
<div class="pagination" id="pagination" style="float:right">
<ul class="pagination">
<li ng-class="prevPageDisabled()"><a href ng-click="firstPage()">First</a></li>
<li ng-class="prevPageDisabled()"><a href ng-click="prevPage()">Prev</a></li>
<li ng-repeat="n in range()" ng-class="{active: n == currentPage}" ng-click="setPage(n)"><a href>{{n+1}}</a></li>
<li ng-class="nextPageDisabled()"><a href ng-click="nextPage()">Next</a></li>
<li ng-class="nextPageDisabled()"><a href ng-click="lastPage()">Last</a></li>
</ul>
</div>
</div>
CSS
/* Filter Css */
.filtersList li { list - style: none;
margin - bottom: 15 px; }
.filtersList li.reset { text - align: right }
.filtersIinputSelect { width: 100 % ;padding: 5 px }
.filtersList li select { width: 100 % }
.mail_list_column, .x_panel, .mail_list, .mail_view { border: none;text - align: left; }
.filterHeader { border - bottom: 1 px solid# d5d5d5;
padding - bottom: 8 px;
margin - bottom: 15 px;
margin - top: 7 px;
font - size: 13 px;
color: #a6a5a5; }
.filtersList li: last - child { margin - bottom: 0 px!important; }
.delsecButton { width: 120 px!important;height: 30 px!important;cursor: not - allowed!important;color: rgba(252, 107, 107, 0.4);font - size: 13 px;border: 1 px solid# e11a1a;background: transparent;border - radius: 5 px }
.secButton { width: 120 px!important;height: 30 px!important;font - size: 13 px;border: 1 px solid #3b88da;background:transparent; border-radius:0px}
.urlLinkcolor{color: # 3 b88da;cursor: pointer; }
.addHover: hover { background - color: #3b88da; color:# fff }
.urlLinkcolor: hover { font - decoration: underline; }
.filterLabelFontsize label { font - size: 13 px;
font - weight: normal; }
.filterHeaderLabelFontsize { font - size: 14 px;
font - weight: normal; }
.filterLabelFontsize h5 { border - bottom: 1 px solid# d5d5d5;
padding - bottom: 5 px; }
.rankfilterlist { margin - bottom: 15 px; }
.fiter - title {}
/* Pagination Css */
.pagination { text - align: right; }
.table - bordered > tbody > tr > td, .table - bordered > tbody > tr > th, .table - bordered > tfoot > tr > td, .table - bordered > tfoot > tr > th, .table - bordered > thead > tr > td, .table - bordered > thead > tr > th { border: none; }
.table - striped > tbody > tr: nth - of - type(odd) { background - color: transparent; }
.table > thead > tr > th { border - bottom: none; }
.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th { color: #fff }
.backgroundColortextBox { background - color: #596473; border:none}
.navbar-default{background-color:# fff }
/* Company Info Css */
.companyInfoheader { background: #172436; padding:14px 0; border-bottom:1px solid # 91 c449;margin - bottom: 2 px;height: 45 px!important; }
.companyInfotitle { color: #fff;padding - left: 1 % ; }
.companyInfotitle { color: #fff;padding - left: 1.5 % ; }
.companyInfoMinMaxBox { width: 45 % ;padding: 5 px; }
.companyInfoLabelColor { color: #a6a5a5; }
.filter - bar - right - 5 { float: right;margin - right: 2 % ;margin - top: -.7 % ; }#
RightBox {
box - shadow: 0 px 2 px 8 px rgba(0, 0, 0, 0.8);
border: 1 px solid# fff;
text - align: left;
padding: 10 px 0;
width: 98 % ;
margin - left: 24 px;
margin - top: 10 px;
}#
RightBox label { text - transform: uppercase }#
RightBox table { width: 75 % ;color: #fff;margin - left: 2 % }#
RightBox table tr td: nth - child(odd) { width: 120 px;padding - bottom: 10 px }#
RightBox table tr td: nth - child(even) { width: 240 px;padding - bottom: 10 px }#
RightBox: last - child {
margin - bottom: 15 px;
}
.moredetails {
float: right;
margin - top: -25 px;
font - weight: 500;
color: #428BCA;
background: transparent;
border: none;
outline: none;
margin-right: 6%;
}
.moredetails:hover{text-decoration:underline}
.chkBox {
float: right;
margin-top: -50px !important;
width: 2%;
outline: none;
}
.row{font-family: 'Lato';}
.fa-sort-down:before, .fa-sort-desc:before{content: "\f0dd"; float: right;font-size: 15px; margin-top: -4px; padding-left: 5px;}
/* Calibrator Css */
# candidateCountborder,
#companyCountborder { border: 1 px dashed# fff;margin - top: 33 px;height: 70 vh }#
cleanupCountborder { border: 1 px dashed# fff;height: 70 vh }#
candidatenumber { text - align: center;
vertical - align: middle }
/* Modal Css */
.modal - header { background - color: #fff }
.modal - heading { font - family: 'Lato', sans - serif;
font - size: 18 px;
font - weight: 300;
text - align: left;
color: #172436;}
.modal-url {font-family: 'Lato', sans-serif; font-size: 14px; font-weight: 300; text-align: left; color: # 3 b88da; }
.modal - label { font - family: 'Lato', sans - serif;
font - size: 13 px;
font - weight: normal;
text - align: left;
color: #d5d5d5!important;
text - transform: capitalize; }
.modal - data { font - size: 14 px;
font - weight: normal;
text - align: left;
color: #ffffff; }
.modal - content { background - color: #2f3a4a; margin-top:-7%; border-radius:0px !important}
.adminmodalIinputSelect{width: 80%; padding: 5px;}
.modaltable{color: # fff;
width: 100 % ; }
.modaltable tr td: first - child { width: 25 % ; }
.modaltable tr td: last - child { width: 52 % ;margin - right: 15 % }
.modal - dialog { margin - top: 10 % ; }
.modal - footer { border: none;padding: 10 px 0 15 px 0; }
.modalButtons {
background - color: #596473; color: # FFFFFF;
border - radius: 0 px;
display: inline - block;
margin - bottom: 0;
font - size: 14 px;
font - weight: 400;
line - height: 1.42857143;
text - align: center;
white - space: nowrap;
vertical - align: middle; - ms - touch - action: manipulation;
touch - action: manipulation;
cursor: pointer; - webkit - user - select: none; - moz - user - select: none; - ms - user - select: none;
user - select: none;
background - image: none;
border: 1 px solid transparent;
}#
savemsg { color: #a6a5a5;padding - top: 5 px; }
/* Add User Css */
#
adduser {
display: none;
}
/* datatable common css */
table.dataTable { margin - top: 0!important }
table.dataTable thead.sorting: after,
table.dataTable thead.sorting_asc: after,
table.dataTable thead.sorting_desc: after,
table.dataTable thead.sorting_asc_disabled: after,
table.dataTable thead.sorting_desc_disabled: after {
position: relative!important;
bottom: -2 px!important;
margin - left: 10 px!important;
right: 0!important;
display: inline!important;
font - family: 'Glyphicons Halflings';
opacity: 0.5;
}
table.dataTable thead.sorting,
table.dataTable thead.sorting_asc,
table.dataTable thead.sorting_desc,
table.dataTable thead.sorting_asc_disabled,
table.dataTable thead.sorting_desc_disabled {
cursor: context - menu!important;
}
.selectcard {
background: transparent;
width: 74 px;
height: 24 px;
border: 1 px solid# ffffff;
color: #ffffff;
font - size: 14 px;
}
.selectcard: focus {
background - color: #596473;
}
.modalcontentlabel {
color: # FFFFFF!important;
}
.rankerrecord {
height: 80 px;
text - align: left justify;
border: none!important;
border - bottom: 1 px solid #596473;
}
.filter-input-height {
height: 30px;
}
.table-head {
font-family: 'Lato', sans-serif;
font-size: 13px;
font-weight: normal;
color: # d5d5d5!important;
}
.radio {
display: inline - block;
color: #c6c6c6;
}
.radio: active {
color: #eeeeee!important;
}
.rankersavecancel {
margin: 2 px 5 % ;
}
.radio - button {
font - size: 14 px;
font - weight: normal;
color: #eeeeee;
}
table.dataTable thead.sorting: after,
table.dataTable thead.sorting_asc: after,
table.dataTable thead.sorting_desc: after,
table.dataTable thead.sorting_asc_disabled: after,
table.dataTable thead.sorting_desc_disabled: after {
position: relative!important;
bottom: -2 px!important;
margin - left: 10 px!important;
right: 0!important;
display: inline!important;
font - family: 'Glyphicons Halflings';
opacity: 0.5;
}
table.dataTable thead.sorting,
table.dataTable thead.sorting_asc,
table.dataTable thead.sorting_desc,
table.dataTable thead.sorting_asc_disabled,
table.dataTable thead.sorting_desc_disabled {
cursor: context - menu!important;
}
.ranktablehead { position: fixed;background - color: #263141; border-bottom: 1px solid # FFFFFF;width: 76 % ;top: 104 px; }
2 个答案:
答案 0 :(得分：0)
这种问题已经在另一个线程中解决了。 以下是其他人提出的解决方案的小提琴。
http://jsfiddle.net/andrewwhitaker/fj8wM/
<table id="table-1">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
tbody>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
</tbody>
</table>
<table id="header-fixed"></table>
这个人刚刚为它做了第二张桌子。它虽然有点jQuery。
答案 1 :(得分：0)
请为您的目的找到以下代码：
<html>
<head>
<title>Demo</title>
<style>
.aws-main {
display: block;
}
.aws-left-sidebar {
float: left;
max-height: 320px;
width: 20%;
padding: 10px;
background-color: #EEE;
box-sizing: border-box;
overflow-y: scroll;
}
.aws-filter { padding: 10px 0; }
.aws-right-sidebar {
float: left;
width: 80%;
box-sizing: border-box;
}
.aws-fixed-header {
padding: 0;
}
.aws-fixed-header thead {
display: block;
background-color: #333;
color: #FFF;
}
.aws-fixed-header tbody {
display: block;
max-height: 300px;
width: 100%;
overflow-y: scroll;
}
.aws-fixed-header tr td {
width: 200px;
padding: 5px 10px;
}
.aws-fixed-header tbody tr {
background-color: #EEE;
}
.aws-fixed-header tbody tr:nth-child(2n) {
background-color: #FFF;
}
</style>
</head>
<body>
<div class="aws-main">
<div class="aws-left-sidebar">
<div class="aws-filter">Filter</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
</div>
<div class="aws-right-sidebar">
<table class="aws-fixed-header">
<thead>
<tr>
<td>Sl. No.</td>
<td>Name</td>
<td>Age</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>2</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>2</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>4</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>4</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>1</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>5</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>6</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>7</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>8</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>8</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>8</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>8</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>8</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>8</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>8</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>8</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>8</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>8</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>8</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>8</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>8</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>8</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>8</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>8</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>8</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>8</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>8</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>8</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>8</td>
<td>John Doe</td>
<td>24</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？