在html中将滚动条添加到表体

时间：2017-01-03 16:01:23

标签： javascript html css angularjs tree

我想知道如何将滚动条仅添加到table body，而不是table head。在下面的示例和此Plunker中，添加滚动条时，它们同时控制table head和table body。我想要header和body的水平滚动条，但只需要body的垂直滚动条。

HTML 

<html>
<head>
<script src="angular.min.js"></script>

<script src="script.js"></script>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="font-awesome.min.css"/>
<link rel="stylesheet" href="bootstrap.min.css" />
</head>
<body data-ng-app="testApp" data-ng-controller="treeTable">
<div  class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-9">
    <div class="tableheight ">
  <table class="treetable-nested childtable">
    <thead>
      <tr>
        <!-- <th >
          <input data-ng-checked="(list | selected).length == list.length" data-ng-click="toggleAllCheckboxes($event)" type="checkbox" />
        </th> -->
        <th class="cell-members">
         <input data-ng-checked="(list | selected).length == list.length" data-ng-click="toggleAllCheckboxes($event)" type="checkbox" /> Name
        </th>
        <th class="cell-members">
          Version
        </th>
        <th class="cell-members">
          Size
        </th>
        <th class="cell-members">
        Modified By
        </th>
        <th class="cell-members">
        Labels
        </th>
        <th class="cell-members">
        Description
        </th>
      </tr>
    </thead>
    <tbody class="newRepo" style="font-size:12px" data-ng-class="{opened: item.opened}" data-ng-include="&#39;table_tree.html&#39;" data-ng-repeat="item in list"></tbody>
  </table>
    </div>
  <script id="table_tree.html" type="text/ng-template">
    <tr ng-class="{parent: item.children}" ng-init="parentScope = $parent.$parent; initCheckbox(item, parentScope.item)">

      <td class="cell-name top-border" ng-if="level &amp;&amp; level &gt; 1">
      <span style="padding-left: 30px" >&nbsp;  <input ng-change="toggleCheckbox(item, parentScope)" ng-model="item.selected" type="checkbox" />
        {{item.name}} </span>
      </td>
<td class="cell-name top-border" ng-if=" &#40;&#33;level &amp;&amp; level &lt;&#61; 1 &#41; &#124;&#124 &#40;level &amp;&amp; level &lt;&#61; 1&#41;">
        <span style="padding-left:11px" ng-click="item.opened = !item.opened"></span>&nbsp;<input ng-change="toggleCheckbox(item, parentScope)" ng-model="item.selected" type="checkbox" />
        {{item.name}}
      </td>

<td class="cell-name top-border" ng-if="&#33;level">
       <span class="indent" ng-click="item.opened = !item.opened">&nbsp;<input ng-change="toggleCheckbox(item, parentScope)" ng-model="item.selected" type="checkbox" />
        {{item.name}} </span>
      </td>

      <td class="cell-name">
        {{item.Version}} 
      </td>
      <td class="cell-name">
        {{item.Size}}
      </td>
      <td class="cell-name">
        {{item.ModifiedBy}}
      </td>
    <td class="cell-name">
        {{item.Labels}}
      </td>
<td class="cell-name">
        {{item.Description}}
      </td>
    </tr>
    <tr class="children" ng-if="item.children &amp;&amp; item.children.length &gt; 0">
      <td colspan="6">
        <table class="childtable">
          <tbody style="font-size:12px" ng-class="{opened: item.opened}" ng-include="&#39;table_tree.html&#39;" ng-init="level = level + 1" ng-repeat="item in item.children"></tbody>
        </table>
      </td>
    </tr>
  </script>
</div>
</div>
</div>
</div>
</body>
</html>

4 个答案:

答案 0 :(得分：2)

Plunker

HTML 

<html>

<head>
  <script src="angular.min.js"></script>
  <script src="jquery.js"></script>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css" />
  <!-- <link rel="stylesheet" href="font-awesome.min.css" /> -->
  <link rel="stylesheet" href="bootstrap.min.css" />
</head>

<body data-ng-app="testApp" data-ng-controller="treeTable">
  <div class="container-fluid">
    <div class="main-wrapper">
      <div class="table-outer-wrapper">
        <table class="treetable-nested childtable">
          <thead>
            <tr>
              <!-- <th >
          <input data-ng-checked="(list | selected).length == list.length" data-ng-click="toggleAllCheckboxes($event)" type="checkbox" />
        </th> -->
              <th class="cell-members">
                <div>
                  <input data-ng-checked="(list | selected).length == list.length" data-ng-click="toggleAllCheckboxes($event)" type="checkbox" /> Name
                </div>
              </th>
              <th class="cell-members">
                <div>
                  Version
                </div>
              </th>
              <th class="cell-members">
                <div>
                  Size
                </div>
              </th>
              <th class="cell-members">
                <div>
                  Modified By
                </div>
              </th>
              <th class="cell-members">
                <div>
                  Labels
                </div>
              </th>
              <th class="cell-members">
                <div>
                  Description
                </div>
              </th>
            </tr>
          </thead>
          <tbody class="newRepo" style="font-size:12px" data-ng-class="{opened: item.opened}" data-ng-include="&#39;table_tree.html&#39;" data-ng-repeat="item in list"></tbody>
        </table>
      </div>
    </div>
  </div>
  <script id="table_tree.html" type="text/ng-template">
    <tr ng-class="{parent: item.children}" ng-init="parentScope = $parent.$parent; initCheckbox(item, parentScope.item)">
      <td class="cell-name top-border" ng-if="level &amp;&amp; level &gt; 1">
        <span style="padding-left: 30px">&nbsp;  <input ng-change="toggleCheckbox(item, parentScope)" ng-model="item.selected" type="checkbox" />
        {{item.name}} </span>
      </td>
      <td class="cell-name top-border" ng-if=" &#40;&#33;level &amp;&amp; level &lt;&#61; 1 &#41; &#124;&#124 &#40;level &amp;&amp; level &lt;&#61; 1&#41;">
        <span style="padding-left:11px" ng-click="item.opened = !item.opened"></span>&nbsp;
        <input ng-change="toggleCheckbox(item, parentScope)" ng-model="item.selected" type="checkbox" /> {{item.name}}
      </td>
      <td class="cell-name top-border" ng-if="&#33;level">
        <span class="indent" ng-click="item.opened = !item.opened">&nbsp;<input ng-change="toggleCheckbox(item, parentScope)" ng-model="item.selected" type="checkbox" />
        {{item.name}} </span>
      </td>
      <td class="cell-name">
        {{item.Version}}
      </td>
      <td class="cell-name">
        {{item.Size}}
      </td>
      <td class="cell-name">
        {{item.ModifiedBy}}
      </td>
      <td class="cell-name">
        {{item.Labels}}
      </td>
      <td class="cell-name">
        {{item.Description}}
      </td>
    </tr>
    <tr class="children" ng-if="item.children &amp;&amp; item.children.length &gt; 0">
      <td colspan="6">
        <table class="childtable">
          <tbody style="font-size:12px" ng-class="{opened: item.opened}" ng-include="&#39;table_tree.html&#39;" ng-init="level = level + 1" ng-repeat="item in item.children"></tbody>
        </table>
      </td>
    </tr>
  </script>
</body>

</html>

CSS 

@charset "UTF-8";
.childtable {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
}

.treetable-nested {
    background: #fff;
    text-align: left;
    width: 100%;
}

.treetable-nested th .treetable-nested td {
    padding: 0;
}

.treetable-nested td {
    background: #F9F9F9;
}

.treetable-nested td + td {
    padding-left: 5px;
}

.treetable-nested td {
    border-top: 1px solid #fff;
}

.treetable-nested td[colspan] {
    border: none;
}

.treetable-nested .cell-input {
    width: 20px;
    border-right: 1px solid;
}

.treetable-nested .cell-members {
    width: 10%;
}

.treetable-nested .indent {}

.treetable-nested .parent > .cell-name {
    cursor: pointer;
}

.treetable-nested .cell-name {}

.treetable-nested .parent > .cell-name > .indent:before {
    font-family: FontAwesome;
    content: "\f054";
    display: inline-block;
    font-size: 12px;
    -moz-transition: -moz-transform 0.3s;
    -o-transition: -o-transform 0.3s;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}

.treetable-nested .children {
    display: none;
}

.treetable-nested .opened > tr > .cell-name > .indent:before {
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.treetable-nested .opened > .children {
    display: table-row;
}




.main-wrapper {
    position: relative;
    padding-top: 37px;
}

.table-outer-wrapper {
    height: 150px;
    overflow:auto;
}

.table-outer-wrapper table {
    min-width: 800px;
}
.table-head {
    height: 37px;
}
.table-head > div {
    font-size: 16px;
    font-weight: bold;
    float: left;
    padding: 9px 0px;
}
.table-head-wrapper {
    overflow: hidden;
}

JS 

(function () {
    var app, list;
    list = [
        {
            name: 'Repo 1',
            opened: true,
            Version:'Current Version',
            Size:'Repo Size',
            ModifiedBy:'sashi',
            Labels:'repo1',
            Description:'',
            children: [
                {
                    name: 'Bundle 1',
                    opened: true,
                    Version:'Current Version',
                    Size:'Repo Size',
                    ModifiedBy:'sashi',
                    Labels:'repo1',
                    Description:'',
                    children: [
                        {
                            name: 'Comp 1',
                            title: 'Leader',
                            Version:'Current Version',
                                Size:'Repo Size',
                                    ModifiedBy:'sashi',
                                    Labels:'repo1',
                                    Description:''
                        },
                        {
                            name: 'Comp 2',
                            title: 'Senior F2E',
                            Version:'Current Version',
                                Size:'Repo Size',
                                    ModifiedBy:'sashi',
                                    Labels:'repo1',
                                    Description:''
                        },
                        {
                            name: 'Comp 3',
                            title: 'Junior F2E',
                            Version:'Current Version',
                            Size:'Repo Size',
                                ModifiedBy:'sashi',
                                Labels:'repo1',
                                Description:''
                        }
                    ]
                },
                {
                    name: 'Bundle 2',
                    opened: true,
                    Version:'Current Version',
                    Size:'Repo Size',
                    ModifiedBy:'sashi',
                    Labels:'repo1',
                    Description:'',
                    children: [
                        {
                            name: 'Comp 1',
                            title: 'Leader',
                            Version:'Current Version',
                            Size:'Repo Size',
                            ModifiedBy:'sashi',
                            Labels:'repo1',
                            Description:''
                        },
                        {
                            name: 'Comp 2',
                            title: 'Intern',
                            Version:'Current Version',
                            Size:'Repo Size',
                            ModifiedBy:'sashi',
                            Labels:'repo1',
                            Description:''
                        }
                    ]
                },
                {
                    name: 'Bundle 3',
                    opened: true,
                    Version:'Current Version',
                    Size:'Repo Size',
                    ModifiedBy:'sashi',
                    Labels:'repo1',
                    Description:'',
                    children: [
                        {
                            name: 'Comp 1',
                            title: 'Leader',
                            Version:'Current Version',
                            Size:'Repo Size',
                            ModifiedBy:'sashi',
                            Labels:'repo1',
                            Description:''
                        },
                        {
                            name: 'Comp 2',
                            title: 'Intern',
                            Version:'Current Version',
                            Size:'Repo Size',
                            ModifiedBy:'sashi',
                            Labels:'repo1',
                            Description:''
                        }
                    ]
                }
            ]
        },
        {
            name: 'Repo 2',
            Version:'Current Version',
            Size:'Repo Size',
            ModifiedBy:'sashi',
            Labels:'repo1',
            Description:'',
            children: [{
                    name: 'Bundle 1',
                    title: 'Designer',
                    Version:'Current Version',
                    Size:'Repo Size',
                    ModifiedBy:'sashi',
                    Labels:'repo1',
                    Description:''
                }]
        },
        {
            name: 'Repo 3',
            Version:'Current Version',
            Size:'Repo Size',
            ModifiedBy:'sashi',
            Labels:'repo1',
            Description:'',
            children: [{
                    name: 'Bundle 1',
                    title: 'Robot',
                    Version:'Current Version',
                    Size:'Repo Size',
                    ModifiedBy:'sashi',
                    Labels:'repo1',
                    Description:'',
                }]
        }
    ];
    app = angular.module('testApp', []).controller('treeTable', [
        '$scope',
        '$filter',
        function ($scope, $filter) {
            $scope.list = list;

            $scope.save = function() {
                $scope.repoList = [];
                $scope.bundleList = [];
                $scope.componentList = [];
                $scope.selectedItems = [];

                function checkChildren(c) {
                    angular.forEach(c.children, function (c) {
                        if(c.selected) {
                            $scope.bundleList.push(c.name);
                            $scope.selectedItems.push(c.name);
                        }
                        checkComponents (c);
                    });
                }
                function checkComponents(c) {
                    angular.forEach(c.children, function (c) {
                       if (c.selected){
                          $scope.componentList.push(c.name);
                          $scope.selectedItems.push(c.name);
                       }
                    //    checkChildren(c);
                    });
               }

                angular.forEach($scope.list, function(value, key) {
                    alert(value.name);
                    if(value.selected) {
                        $scope.repoList.push(value.name);
                    }
                    checkChildren(value);
               });
                console.log($scope.repoList);
                console.log($scope.bundleList);
                console.log($scope.componentList);
                console.log($scope.selectedItems);
            };
            $scope.toggleAllCheckboxes = function ($event) {
                var i, item, len, ref, results, selected;
                selected = $event.target.checked;
                //alert(selected);
                ref = $scope.list;
                results = [];
                for (i = 0, len = ref.length; i < len; i++) {
                    /*if (window.CP.shouldStopExecution(1)) {
                        break;
                    }*/
                    item = ref[i];
                    item.selected = selected;
                    if (item.children != null) {
                        results.push($scope.$broadcast('changeChildren', item));
                    } else {
                        results.push(void 0);
                    }
                    //console.log();
                }
                //window.CP.exitedLoop(1);
                return results;
            };
            $scope.initCheckbox = function (item, parentItem) {
                //alert(parentItem.selected);
                return item.selected = parentItem && parentItem.selected || item.selected || false;
            };
            $scope.toggleCheckbox = function (item, parentScope) {
                if (item.children != null) {
                    $scope.$broadcast('changeChildren', item);
                }
                if (parentScope.item != null) {
                    return $scope.$emit('changeParent', parentScope);
                }
            };
            $scope.$on('changeChildren', function (event, parentItem) {
                var child, i, len, ref, results;
                ref = parentItem.children;
                results = [];
                for (i = 0, len = ref.length; i < len; i++) {
                    /*if (window.CP.shouldStopExecution(2)) {
                        break;
                    }*/
                    child = ref[i];
                    child.selected = parentItem.selected;
                    if (child.children != null) {
                        results.push($scope.$broadcast('changeChildren', child));
                    } else {
                        results.push(void 0);
                    }
                }
               // window.CP.exitedLoop(2);
                return results;
            });
            return $scope.$on('changeParent', function (event, parentScope) {
                var children;
                children = parentScope.item.children;
                parentScope.item.selected = $filter('selected')(children).length === children.length;
                parentScope = parentScope.$parent.$parent;
                if (parentScope.item != null) {
                    return $scope.$broadcast('changeParent', parentScope);
                }
            });
        }
    ]);
    app.filter('selected', [
        '$filter',
        function ($filter) {
            return function (files) {
                return $filter('filter')(files, { selected: true });
            };
        }
    ]);
}.call(this));


function resize_table() {
    var reference_td, head_padding;
    var scrollbar_width = $('.table-outer-wrapper')[0].offsetHeight - $('.table-outer-wrapper')[0].clientHeight;

    $('.table-head').width($('.table-outer-wrapper table').width());


    $('.table-head-wrapper').width($('.table-outer-wrapper').width() - scrollbar_width);
    $('.table-head > div').each(function(i,e){
        reference_td = $('.table-outer-wrapper table tr td:nth-child(' + (i +1)+ ')');
        head_padding = parseInt($(e).css('padding-left'), 10);
        console.log(head_padding);
        $(e).width(reference_td.outerWidth() - (head_padding*2));
    })

}

function scroll_table(){
    var sx = $('.table-outer-wrapper').scrollLeft();
    $('.table-head').css('transform', 'translateX(-' + sx + 'px)');
}


$(document).ready(function(){
    $('.main-wrapper').prepend('<div class="table-head-wrapper"><div class="table-head"></div></div>');

    $('.cell-members > div').each(function(i,e){
        $(e).appendTo('.table-head');
    });

    resize_table();

    $(window).resize(function(){
        resize_table();
    });

    $('.table-outer-wrapper').scroll(function() {
        scroll_table();
    });

})

答案 1 :(得分：1)

这会有帮助吗？

.tableheight {
    /* leave some room for the table head height */
    padding-top: 38px;
}
.childtable thead {
    position: fixed;
    background: white;
    top:0;
    left:0;
    width: 100%;
}

答案 2 :(得分：0)

Make overflow-x as hidden which hides the scrollbar in the x-axis.

https://plnkr.co/edit/jOR3MD4Lf8ysgxVULmar?p=preview
@charset "UTF-8";
.childtable {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
}

.treetable-nested {
  background: #fff;
  text-align: left;
  width: 100%;
}

.tableheight {
  height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
}

.tableheight::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}

.tableheight::-webkit-scrollbar {
  width: 10px;
  background-color: #F5F5F5;
}

.tableheight::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, .3);
  background-color: #737373;
}

.treetable-nested th .treetable-nested td {
  padding: 0;
}

.treetable-nested td {
  background: #F9F9F9;
}

.treetable-nested th + th,
.treetable-nested th + td,
.treetable-nested td + th,
.treetable-nested td + td {
  padding-left: 5px;
}

.treetable-nested td {
  border-top: 1px solid #fff;
}

.treetable-nested td[colspan] {
  border: none;
}

.treetable-nested .cell-input {
  width: 20px;
  border-right: 1px solid;
}

.treetable-nested .cell-members {
  width: 10%;
}

.treetable-nested .indent {}

.treetable-nested .parent > .cell-name {
  cursor: pointer;
}

.treetable-nested .cell-name {}

.treetable-nested .parent > .cell-name > .indent:before {
  font-family: FontAwesome;
  content: "\f054";
  display: inline-block;
  font-size: 12px;
  -moz-transition: -moz-transform 0.3s;
  -o-transition: -o-transform 0.3s;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
}

.treetable-nested .children {
  display: none;
}

.treetable-nested .newRepo {
  border-top: 5px solid #fff;
  /*this is used for giving space between each repo*/
}

.treetable-nested .opened > tr > .cell-name > .indent:before {
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.treetable-nested .opened > .children {
  display: table-row;
}

答案 3 :(得分：0)

你可以创建两个表，一个只有表头，另一个有表体。然后你溢出第二个包含tbody的表。 Plnkr：Plnkr 

<table class="treetable-nested childtable">
<thead>
  <tr>
    <!-- <th >
      <input data-ng-checked="(list | selected).length == list.length" data-ng-click="toggleAllCheckboxes($event)" type="checkbox" />
    </th> -->
    <th class="cell-members">
     <input data-ng-checked="(list | selected).length == list.length" data-ng-click="toggleAllCheckboxes($event)" type="checkbox" /> Name
    </th>
    <th class="cell-members">
      Version
    </th>
    <th class="cell-members">
      Size
    </th>
    <th class="cell-members">
    Modified By
    </th>
    <th class="cell-members">
    Labels
    </th>
    <th class="cell-members">
    Description
    </th>
  </tr>
</thead>


<div class="fakeTable">
<table class="treetable-nested childtable2">
  <tbody class="newRepo" style="font-size:12px" data-ng-class="{opened: item.opened}" data-ng-include="&#39;table_tree.html&#39;" data-ng-repeat="item in list">
  </tbody>
</table>
</div>

您从css中的.tableheight类中删除溢出并添加此

.childtable2 {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  display:table;
  border-spacing: 0;
}

.fakeTable{
  max-height:150px;
  display:block;
  overflow-y:auto;
}
相关问题
最新问题