During the daily development process, we may encounter a requirement to display a table at a specified height, and a scrollbar when it exceeds the height.
Let's take this question and discuss it together!
1<! DOCTYPE html>234<title></title>5<link href= ". /css/bootstrap.css "rel=" stylesheet "/>6<link href= ". /css/index.css "rel=" stylesheet "/>78<body ng-controller= "Tablectrl" >9<div>Ten<div> One<table class= "Table table-striped table-bordered table-hover table-condensed" > A<thead> -<tr> -<th>Id</th> the<th>Name</th> -<th>Email</th> -<th> Operations </th> -</tr> +</thead> -<tbody> +<TR ng-repeat= "Person in Persons" > A<TD ng-bind= "Person.id" ></td> at<TD ng-bind= "Person.name" ></td> -<TD ng-bind= "Person.email" ></td> -<TD ng-click= "Persons.remove (person)" class= "Del-person" > Delete </td> -</tr> -</tbody> -</table> in</div> -</div> to<script src= ". /js/angular.js "></script> +<script src= ". /js/index.js "></script> -</body> theHTML1 varApp = Angular.module ("app", []);2 3App.controller ("Tablectrl", [4' $scope ',function($scope) {5$scope. Persons = [];6 for(vari = 0; I < 15; i++) {7 varindex = i + 1;8 varperson = {9 Id:index,TenName: ' Person ' +Index, OneEmail: ' Person ' + index + ' @qq. com ' A }; - $scope. Persons.push (person); - } the - //Delete person -$scope. deleteperson=function(person) { - $scope. Persons.remove (person); + } - } + ]); A at /** - * Delete Array to specify subscript or specified object - */ -Array.prototype.remove =function(obj) { - for(vari = 0; I < This. length; i++) { - vartemp = This[i]; in if(!IsNaN (obj)) { -temp =i; to } + if(temp = =obj) { - for(varj = i; J < This. length; J + +) { the This[j] = This[j + 1]; * } $ This. length = This. length-1;Panax Notoginseng } - } the};JSFirst look at the effect, how
It seems that there is no problem, if I give table outside the Div, set a small point of height?
Then the problem comes again, the Red line is the Div area, it is obvious that the table debugging is beyond the height of the div.
I want to realize that when the height of the table exceeds the DIV, the scroll bar appears instead of being directly exceeded, which is too violent.
That sets the overflow:auto of the Div; see how it works.
Looks like can, open big your 24k titanium gold eye to see, will find the scroll bar drop box, Thead disappeared, the column can also know which column is what, column more words, do not look at the column head, do not know the column name is what.
Then I will tbody fixed height, overflow:auto; see how it works.
THEAD is fixed, tbody also appeared scroll bar, but thead and tbody column width is not aligned, this is too ugly bar.
Alas! White has been busy for so long time ...
As the only to consult Daniel ...
Daniel said: "Will not do, still do not imitate it?" "。
So opened the Kendoui official website, found this
This is not what I want to effect, early said.
Look at the resulting code structure.
It uses two div to set up two table, one put thead, one put thead, looks like a table.
So I changed the code by this structure. Look at the effect.
The column widths of thead and tbody are not aligned, which is not the result I want.
Set width below
When there is a scrollbar, it is still a bit misaligned, it is obvious to delete a few data to try.
It is aligned when there is no scroll bar. The scrollbar occupies the width of the dvtbody, where table is wider than the table below with a scroll bar width of 17px. We can use script control to solve this problem.
Sets the padding-right:17px of Dvthead when the height of the tatbody exceeds its parent element.
Pretty much, that's what happened.
Final effect
Finished, can be arbitrarily deleted, added to see the effect.
Write it first.
Code Download Https://github.com/dengjianjun/MyBlog/tree/master/MyBlog/Pages
If you feel that it helps, please order a praise, thank you!
Deficiencies and mistakes, please criticize!
A table out-of-height scroll bar solution
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
