在日常的开发过程中，我们可能会遇到这样一种需求，在指定高度内显示table,超过高度时表格出滚动条。

让我们带着这个问题，一起来探讨吧！

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml" ng-app="app">

 <head>

     <title></title>

     <link href="../css/bootstrap.css" rel="stylesheet" />

     <link href="../css/index.css" rel="stylesheet" />

 </head>

 <body ng-controller="tableCtrl">

 <div>

     <div>

         <table class="table table-striped table-bordered table-hover table-condensed">

             <thead>

                 <tr>

                     <th>Id</th>

                     <th>Name</th>

                     <th>Email</th>

                     <th>操作</th>

                 </tr>

             </thead>

             <tbody>

                 <tr ng-repeat="person in persons">

                     <td ng-bind="person.id"></td>

                     <td ng-bind="person.name"></td>

                     <td ng-bind="person.email"></td>

                     <td ng-click="persons.remove(person)" class="del-person">删除</td>

                 </tr>

             </tbody>

         </table>

     </div>

 </div>

 <script src="../js/angular.js"></script>

 <script src="../js/index.js"></script>

 </body>

 </html>

html

 var app = angular.module("app", []);

 app.controller("tableCtrl", [

     '$scope', function($scope) {

         $scope.persons = [];

         for (var i = 0; i < 15; i++) {

             var index = i + 1;

             var person = {

                 id: index,

                 name: 'person' + index,

                 email: 'person' + index + '@qq.com'

             };

             $scope.persons.push(person);

         }

         //删除person

         $scope.deletePerson= function(person) {

             $scope.persons.remove(person);

         }

     }

 ]);

 /**

  *删除数组指定下标或指定对象

  */

 Array.prototype.remove = function (obj) {

     for (var i = 0; i < this.length; i++) {

         var temp = this[i];

         if (!isNaN(obj)) {

             temp = i;

         }

         if (temp == obj) {

             for (var j = i; j < this.length; j++) {

                 this[j] = this[j + 1];

             }

             this.length = this.length - 1;

         }

     }

 };

js

先看下效果，怎样

貌似没什么问题，如果我给table外面的div,设置一个小点的高度呢？

那么问题又来了，红线是div的区域，很明显看到，table的调试超出了div的高度。

我想实现当table的高度超出div时，出现滚动条，而不是直接超出，这样太暴力了。

那把设置div的overflow:auto;看看效果怎样。

貌似可以了，睁大你的24k钛金眼看看，会发现滚动条下拉框时，thead不见了，列少还可以知道哪个列是什么，列多的话就，不看列头，就不知道列名是什么。

那我就将tbody固定高度，overflow:auto;看看效果怎样。

thead是固定不动了，tbody也出现了滚动条，但是thead与tbody的列宽度没对齐，这也太丑了吧。

唉！白忙了这么长时间了...

看成来只有请教大牛了。。。

大牛曰："不会做，还不会模仿吗？"。

于是打开了KendoUi官网，找到了这个

这不就是我要的效果吗，早说嘛。

看了下生成的代码结构

它用的是两个div内套了两个table，一个放thead,一个放thead,看起来像是一个table。

于是，我按这种结构修改代码。看看效果。

thead与tbody的列宽没对齐，这不是我想要的结果。

设置下宽度

有滚动条时，还是有点没对齐，很明显，删除几条数据试试。

没滚动条时是对齐的。滚动条占用了dvTbody的宽度，这里上面table比下面的table宽出一个滚动条的宽度17px。我们可以用脚本控制，来解决这个问题。

当taTbody的高度超过其父元素时，设置dvThead的padding-right:17px.

差不多了吧，有那么回事了。

最终效果

大功告成，可随意删除、增加来看效果。

先写到这。

代码下载https://github.com/dengjianjun/MyBlog/tree/master/MyBlog/Pages

如果觉得对你有帮助，请点个赞，谢谢！

不足与错误之处，敬请批评指正！

一种table超出高度自动出滚动条的解决方案的更多相关文章

  1. flex自适应高度内容高度超出容器高度自动出现滚动条的问题

    在容器中设置 flex-grow:2; overflow-y:auto;overflow-x:hidden;容器高度自适应. 内容高度不固定,无法出现滚动条,然后在容器中添加height:0,出现滚动 ...

  2. div内容超出后自动显示滚动条

    一. <div style=" overflow:scroll; width:400px; height:400px;”></div> 记住宽和高一定要设置噢,否则不 ...

  3. div 超出高度滚动条，超出宽度点点点

    超出高度滚动条 style="width:230px; height: 180px; overflow: auto;" 超出宽度点点点 style="width: 220 ...

  4. table 锁定表头，出滚动对齐

    前一段时间来了一个汇总的需求,想锁定表头,这个问题在网上找了老半天,实现起来都比较麻烦,经过这几天的摸索终于找到一个简洁的处理方法 下面介绍一下如何处理的: 1.thead 和tbody 放两个tab ...

  5. 纯CSS实现侧边栏/分栏高度自动相等

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=694 一.为何要分栏高 ...

  6. textarea宽度、高度自动适应处理方法

    textarea自动高度 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http: ...

  7. 请阐述调用Activity有哪几种方法，并写出相关的Java代码

    请阐述调用Activity有哪几种方法,并写出相关的Java代码. 答案:可以采用两种方式调用Activity:显示调用和隐式调用.显示调用直接指定了Activity,代码如下: Intent int ...

  8. 四种常见的提示弹出框（success，warning，error，loading）原生JavaScript和jQuery分别实现

    原文:四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现 虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们 ...

  9. flex 布局 出滚动条的操作

    flex布局也是可以初横向滚动条的哦, 设置 flex-wrap:nowrap ,然后横向的固定宽度超过100% 则出滚动条

随机推荐

  1. 解决iis7 0x80070002 错误代码问题

    环境:iis7 win7 64位 vs2012 出现的问题:发布代码iis出现0x80070002 错误代码 解决方案分三步: 1.添加通配符脚本映射 请选择:C:\Windows\Microsoft ...

  2. VirtualBox后台运行虚拟机（无图形界面启动虚拟机）

    有时候可能会用虚拟机搭建集群,这是通常希望不现实图形界面,试了半天,似乎只有Virtual Box支持无图形界面运行虚拟机,方法如下: 在Virtual Box的安装目录中找到VBoxManage,M ...

  3. json 与jsonp 特点及区别

    简单描述JSON跟JSONP的区别以及实战 什么是JSON? 前面简单说了一下,JSON是一种基于文本的数据交换方式,或者叫做数据描述格式,你是否该选用他首先肯定要关注它所拥有的优点. JSON的优点 ...

  4. 浅谈Java中的hashcode方法

    哈希表这个数据结构想必大多数人都不陌生,而且在很多地方都会利用到hash表来提高查找效率.在Java的Object类中有一个方法: 1 public native int hashCode(); 根据 ...

  5. Python从线程获取函数返回值

    Python中利用强大的threading模块可以很容易的实现多线程开发,提高运行速度.这一般是对某个进行大量计算操作的的函数进行多线程处理,然后合并各线程的结果.获取函数返回值的方法可以如下: 1) ...

  6. mac 下配置 VS Code 开发 Golang

    对于Visual Studio Code开发工具,有一款优秀的GoLang插件,它的主页为:https://github.com/microsoft/vscode-go 这款插件的特性包括: 代码着彩 ...

  7. 高级搜索插件solis search在umbraco中的使用

    好久没有写关于umbraco的博客了,这段时间在研究solis search,感觉它太强大,好东西是需要分享的,所以写一篇简单的使用博客分享给个人umbraco爱好者. 简介 在了解solis sea ...

  8. [转帖]The Lambda Calculus for Absolute Dummies (like myself)

    Monday, May 7, 2012 The Lambda Calculus for Absolute Dummies (like myself)   If there is one highly ...

  9. Struts2：效验器——声明式

    就是用xml配置的方式,而不是Java代码的形式,那个是“编程式” Action: package org.ah.s2; import com.opensymphony.xwork2.ActionSu ...

  10. Partitioning & Archiving tables in SQL Server (Part 2: Split, Merge and Switch partitions)

    Reference: http://blogs.msdn.com/b/felixmar/archive/2011/08/29/partitioning-amp-archiving-tables-in- ...