一种table超出高度自动出滚动条的解决方案_html/css

首页

web前端

html教程

一种table超出高度自动出滚动条的解决方案_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:36 AM

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

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

 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml" ng-app="app"> 3 <head> 4     <title></title> 5     <link href="../css/bootstrap.css" rel="stylesheet" /> 6     <link href="../css/index.css" rel="stylesheet" /> 7 </head> 8 <body ng-controller="tableCtrl"> 9 <div>10     <div>11         <table class="table table-striped table-bordered table-hover table-condensed">12             <thead>13                 <tr>14                     <th>Id</th>15                     <th>Name</th>16                     <th>Email</th>17                     <th>操作</th>18                 </tr>19             </thead>20             <tbody>21                 <tr ng-repeat="person in persons">22                     <td ng-bind="person.id"></td>23                     <td ng-bind="person.name"></td>24                     <td ng-bind="person.email"></td>25                     <td ng-click="persons.remove(person)" class="del-person">删除</td>26                 </tr>27             </tbody>28         </table>29     </div>30 </div>31 <script src="../js/angular.js"></script>32 <script src="../js/index.js"></script>33 </body>34 </html>

 1 var app = angular.module("app", []); 2  3 app.controller("tableCtrl", [ 4     '$scope', function($scope) { 5         $scope.persons = []; 6         for (var i = 0; i < 15; i++) { 7             var index = i + 1; 8             var person = { 9                 id: index,10                 name: 'person' + index,11                 email: 'person' + index + '@qq.com'12             };13             $scope.persons.push(person);14         }15 16         //删除person17         $scope.deletePerson= function(person) {18             $scope.persons.remove(person);19         }20     }21 ]);22 23 /**24  *删除数组指定下标或指定对象25  */26 Array.prototype.remove = function (obj) {27     for (var i = 0; i < this.length; i++) {28         var temp = this[i];29         if (!isNaN(obj)) {30             temp = i;31         }32         if (temp == obj) {33             for (var j = i; j < this.length; j++) {34                 this[j] = this[j + 1];35             }36             this.length = this.length - 1;37         }38     }39 };

先看下效果，怎样

貌似没什么问题，如果我给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

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

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

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

HTML：是编程语言还是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。

HTML：建立网页的结构Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义，使用、、等标签。2.提供语义化标记，如、、等，提升SEO效果。3.通过标签实现用户交互，需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号，需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

从文本到网站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一种用于构建网页的语言，通过标签和属性定义网页结构和内容。1）HTML通过标签组织文档结构，如、。2）浏览器解析HTML构建DOM并渲染网页。3）HTML5的新特性如、、增强了多媒体功能。4）常见错误包括标签未闭合和属性值未加引号。5）优化建议包括使用语义化标签和减少文件大小。

了解HTML，CSS和JavaScript：初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：构建Web内容Apr 11, 2025 am 12:12 AM

HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容，使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。

HTML和代码：仔细观察术语Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract