日々の開発プロセスでは、テーブルを指定された高さ内に表示する必要があり、高さがテーブルを超えるとスクロール バーが表示されます。
この質問について一緒に話し合いましょう！
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 };
まず、テーブルの外側の div の高さを小さく設定するとどうなるかを見てみましょう。
その後、赤い線が div の領域です。テーブルのデバッグが div の高さを超えていることは明らかです。
テーブルの高さがdivを超えると、直接超えるのではなくスクロールバーが表示されることを理解したいのですが、これはあまりにも暴力的です。
div の overflow:auto; を設定して効果を確認します。
24k チタンの目を開いて見てください。スクロール バーがボックスの下に落ちると、どの列が表示されているかもわかります。列が多すぎる場合は、列の名前がわかりません。
次に、tbody の高さを修正し、overflow:auto; を使用して効果を確認します。
theadは固定され、tbodyにスクロールバーが表示されますが、theadとtbodyの列幅が揃っておらず、あまりにも見苦しいです。
ああ！無駄に長い間忙しかったです…
専門家にアドバイスを求めるしかないようです。 。 。
ダニウはこう言いました。「やり方が分からないなら、真似する方法も分からないのはなぜですか?」
そこで KendoUi 公式ウェブサイトを開いて、これを見つけました
これは私が望んでいた効果ではないでしょうか?
生成されたコード構造を見てください
2 つの div 内に 2 つのテーブルが使用されており、1 つは thead 用、もう 1 つは thead 用です。
そこで、この構造に従ってコードを修正しました。効果をご覧ください。
thethead と tbody の列幅が揃っていません。これは私が望む結果ではありません。
幅を設定します
スクロールバーがまだ少しずれている場合は、いくつかのデータを削除してみてください。
スクロールバーがない場合に整列します。スクロール バーは dvTbody の幅を占め、上のテーブルはスクロール バーの幅 17 ピクセル分だけ下のテーブルよりも広くなります。スクリプト制御を使用すると、この問題を解決できます。
taTbodyの高さが親要素を超えた場合は、dvThead:17px.のpadding-rightを設定します
以上です、以上です。
最終エフェクト
これで完了です。エフェクトを確認するために、必要に応じて削除または追加できます。
最初にこれを書いてください。
コードのダウンロード https://github.com/dengjianjun/MyBlog/tree/master/MyBlog/Pages
役に立ったと思ったら、「いいね！」をお願いします、ありがとうございます!欠点や間違いがあれば批判して修正してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
