【发布时间】：2017-03-05 22:03:47
【问题描述】：
我希望表格标题是固定的，表格主体是可滚动的，左侧有过滤器（整个页面可滚动）保持正文和标题的对齐，其中宽度、填充和边距以百分比表示。还必须保持响应能力。
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; }
【问题讨论】：
-
请贴出你试过的代码。
-
过滤器
sl.编号。 姓名 年龄 1 John Doe 24 -
嗨，我已经在查询中添加了上面的代码
-
嗨@PradeepKumarSJoshi，请发布您想要启用滚动的原始代码，您已经尝试过，而不是复制粘贴一些随机代码的内容。首先尝试自己，然后如果您无法使其工作，请在此处使用您自己尝试的完整代码寻求帮助。请不要把这里的每个人都视为“理所当然”。
-
嗨@SE，我是这类论坛的新用户。对不起！我试过了，找不到解决办法。所以发了这个。我在上面粘贴了代码。
标签： javascript jquery html css angularjs