在日常的开发过程中,我们可能会遇到这样一种需求,在指定高度内显示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. webpack-vue搭建,部署到后端

    1.安装npm(安装node自带npm),npm安装成功测试 2.安装cnpm,也可以装nvm-windows 步骤1,打开user/admin/.npmrc,输入,也可以用命令 步骤2,输入npm ...

  2. Shiro标签

    在使用Shiro标签库前,首先需要在JSP引入shiro标签: <%@ taglib prefix="shiro" uri="http://shiro.apache ...

  3. 开发语言性能对比,C++、Java、Python、LUA、TCC

    一直想做开发语言性能对比,刚好有时间都做了给大家参考一下, 编译类:C++和Java表现还不错 脚本类:TCC脚本动态运行C语言,性能比其他脚本快好多... 想玩TCC的同学下载测试包,TCC目录下修 ...

  4. .net网站发布到局域网流程

    将.net网站发布到局域网的服务器上,会遇到一些版本问题,下面把发布的流程简单说一下 一:发布网站 1.首先把需要的引用程序集都重新生成一下 2.程序集都重新生成之后,右击网站项目,选择发布选项 3. ...

  5. 为没有源码的DLL文件添加强名称

    为没有源码的DLL文件添加强名称 如果项目中引用了其他没有源码的dll文件,并且此dll文件是没有强名称的程序集,则编译时会出现类似 "Assembly generation failed ...

  6. C# 会可能需要的扩展

     1. List 转成DataSet      /// <summary> /// 集合数据转成 DataSet /// </summary> /// <typepara ...

  7. CGI

    CGI的工作原理一般是这么定义的: 客户端web浏览器浏览某个主页后,利用一定的方式提交数据,并通过HTTP协议向Web服务器发出请求,服务器端的HTTP Daemon(守护进程)将描述的主页信息通过 ...

  8. 日本DARTS 支撑的一系列应用项目

    DARTS是多学科空间科学数据平台,例如天体物理.太阳物理.太阳物理.月球与行星科学和微重力科学.在此数据支撑下,有许多应用. 1.http://wms.selene.darts.isas.jaxa. ...

  9. WORD的公式无法与文字对齐

    在使用Mathtype编辑公式后,经常出现以下公式与文字无法对齐的问题: 可以使用以下方式来解决:

  10. ZYNQ学习之——MIO

    1.GPIO基础知识 Zynq7000 系列芯片有 54 个 MIO(multiuse I/O) ,它们分配在 GPIO 的 Bank0 和Bank1 隶属于 PS 部分, 这些 IO 与 PS 直接 ...