How to add scroll bars to a dynamic table with multiple tbodys

Question

I am facing a complicated table design. I need to create a table with possible multiple tbodys. just like this:

As you can see, each tbody is for a date. and I need to add as many row as I want by clicking '+' icon for EACH date. and also can remove each row by clicking '-' icon. Now this is what I have done, but the new requirement is I need to add scroll bar for EACH tbody! (not for all table) each date(tbody) will show a scroll bar if I create more than 3 rows. as you can see, if I click '+' icon for date 01/08/2016, the scroll will appear on the right side of that tbody(only for this date leave other days alone.) How can I do it. Here is my html:

  <table class="table expensetable">
                  <thead>
                    <tr>
                      <th ng-hide="lodging.roomSameForAllDays">Date</th>
                      <th>Expense Type</th>
                      <th>Amount</th>
                      <th>Reimbursement</th>
                      <th ng-hide="lodging.sameDescriptionForAll">Description</th>
                      <th></th>
                    </tr>
                  </thead>
                  <tbody ng-repeat="day in lodging.roomData" ng-class="{'scroll-bar':getExpenseLength(day)}">
                  <tr ng-repeat-start="expense in day" class="ecom-components" ng-repeat-end>
                    <td ng-show="!lodging.roomSameForAllDays && ($index == 0)"
                      rowspan="{{day.length + 1}}"
                      style="vertical-align: top;">{{indexToDate($parent.$index) | date : companyDateFormat}}</td>
                    <td>
                      <div class="dropdown">
                        <button class="btn btn-default dropdown-toggle clearfix" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                          <span class="dropdown-label pull-left">{{expense.expenseType.expenseTypeName}}</span>
                          <span class="caret pull-right"></span>
                        </button>
                        <ul class="dropdown-menu">
                          <li ng-repeat="exp in roomRateTaxExpenseList | orderBy:'expenseTypeName'"><a href="javascript:void(0)"
                            ng-click="expense.expenseType = exp">{{exp.expenseTypeName}}</a></li>
                          <li></li>
                        </ul>
                      </div>
                    </td>  
                    <td><input type="text" ecom-amount ng-model="expense.amount"></td>
                    <td>
                      <div class="dropdown" style="width:100%">
                        <button class="btn btn-default dropdown-toggle clearfix" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          <span class="dropdown-label pull-left">{{RNP_STATUSES[expense.rnp]}}</span>
                          <span class="caret pull-right"></span>
                        </button>
                        <ul class="dropdown-menu">
                          <li><a href="javascript:void(0)" ng-click="expense.rnp = 'r'">Yes</a></li>
                          <li><a href="javascript:void(0)" ng-click="expense.rnp = 'n'">No</a></li>
                          <li><a href="javascript:void(0)" ng-click="expense.rnp = 'p'">Personal</a></li>
                          <li></li>
                        </ul>
                      </div>
                    </td>
                    <td ng-hide="lodging.sameDescriptionForAll"><input type="text" ng-model="expense.description"></td>
                    <td><span class="whitebutton remove" ng-click="deleteRow('roomData', $parent.$index, $index)"></span></td>
                  </tr>
                  <tr>
                    <td colspan="5"><span class="whitebutton add" ng-click="addRow('roomData', $index)"></span></td>
                  </tr>
                  </tbody>
                </table>

Thanks in advance.

Here is what I have tried to, it is close but still didn't 100% match the requirement:

 table.expensetable{
        width:100%;
        thead{
        display:table;
        width:100%;
        }

        tbody {
          max-height:240px;
          display:block;
          tr{
            display:table;
            width:100%;
          }
        }
      }

post js for more information:

$scope.getExpenseLength = function(day){
        var isScroll = false;
        if(day.length>3){
            isScroll = true;
        }else{
            isScroll = false;
        }
        return isScroll;
      }

As you can see, I can add scroll-bar to each tbody( which is cool) but the rowspan, doesn't work after scroll-bar appear or disappear. any update I need here?

all the css for this table is simple. they are very common table style. nothing special...... — linyuanxie, Jan 29 '16 at 17:34
Have you looked at this? http://stackoverflow.com/questions/14834198/table-scroll-with-html-and-css — jcc, Jan 29 '16 at 17:45
I did some tries, but none of them worked out......the closest one I find is I can add scroll-bar for whole table, but I need for each date:( — linyuanxie, Jan 29 '16 at 17:45
I already post what I have done, whatelse I need to change here? Thanks a lot — linyuanxie, Jan 29 '16 at 19:28

score 0 · Answer 1 · answered Jan 29 '16 at 17:46

We have done similar kind of thing in one of our project like below

    var abc =  $scope.$watch('grid.gridModel.data.data.items.length', function (newValue, oldValue) {
                    if (newValue > 4) { //grid should show a scrollbar after 3 rows

                        $scope.grid.gridOptions.autoheight = false;
                        if ($scope.grid.stateModel.gridObj) {
                            $($scope.grid.stateModel.gridObj.element).jqxGrid('height', '124px');
                            $($scope.grid.stateModel.gridObj.element).jqxGrid('refresh');
                        }
                    } else {
                        $scope.grid.gridOptions.autoheight = true;
                        if ($scope.grid.stateModel.gridObj) {
                            $($scope.grid.stateModel.gridObj.element).jqxGrid('height', 'auto');
                            $($scope.grid.stateModel.gridObj.element).jqxGrid('refresh');
                        }
                    }
                });

Here what we are doing is, we are fixing the height of the grid if it contains more then 3 rows else it is of autoheight. In your case if you can count number of rows in addRow( & deleteRow( function then you can also set height/max-height of the table. You might need to set overflow-y:auto while fixing the height.

Hope this helps.

Thanks for your help. right now the issue I think is css part, as you can see in the img, I already done so far, and I can add the scroll bar, but the problem is how to set css to those table or tbody (or wahtevel ). I did try to set table tr : display block, like this:http://stackoverflow.com/questions/27675459/css-scroll-table-with-fixed-header-with-multiple-tbody, but didn't work out for me. — linyuanxie, Jan 29 '16 at 18:32

How to add scroll bars to a dynamic table with multiple tbodys

1 Answers1