一种table超出高度自动出滚动条的解决方案_html/css_WEB-ITnose
在日常的开发过程中，我们可能会遇到这样一种需求，在指定高度内显示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
如果觉得对你有帮助，请点个赞，谢谢！
不足与错误之处，敬请批评指正！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
了解HTML，CSS和JavaScript：初學者指南
Apr 12, 2025 am 12:02 AM
WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。
HTML：結構，CSS：樣式，JavaScript：行為
Apr 18, 2025 am 12:09 AM
HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。
HTML，CSS和JavaScript的未來：網絡開發趨勢
Apr 19, 2025 am 12:02 AM
HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。
HTML的未來：網絡設計的發展和趨勢
Apr 17, 2025 am 12:12 AM
HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。
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 14, 2025 am 12:14 AM
HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。
HTML與CSS和JavaScript：比較Web技術
Apr 23, 2025 am 12:05 AM
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。
