HTML Table formatting issues

Hi,

Could you explain better how did you expect the table?, because in the screenshot that you send was not clear for me understand what are the columns/lines that are not showing as you want.

In addition I detected some tags that are not closed and/or never open - so I clean the code (you could try with this code just to check if maybe this tags was changed the look).

<section ng-init="getPlanAreas()">
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h4 class="text-center">Plan Area Details</h4>
    </div>
    <div class="panel-body">
      <div class="col-lg-12">
        <table class="table table-condensed table-bordered">
          <thead>
          <tr>
                <thead style="background-color: #E0E0E0;">
                <th style="padding-left: 15px;">Plan Area</th>
                <th>Total Tasks</th>
                <th class="text-center" ng-repeat="row in monthMaxDays">{{row.name}}</th>
                <th class="text-center" width="60">Total Hours</th>
                </thead>
          </tr>
          </thead>
          <tbody class="summary-body">
          <tr ng-repeat-start="planArea in planAreas">
            <td style="vertical-align: middle;" ng-click="planToggle(planArea);">
              <a href="">
                <i ng-if="planArea.isCollapsed" class="fa fa-plus" aria-hidden="true"></i>
                <i ng-if="!planArea.isCollapsed" class="fa fa-minus" aria-hidden="true"></i>
              </a> {{planArea.name}}
            </td>
            <td align="center">{{planArea.countActivity}}</td>
            <td colspan="12"></td>
            <td class="text-center">{{planArea.totalHours}}</td>
          </tr>
          <tr ng-repeat-end uib-collapse="planArea.isCollapsed">
            <td colspan="15">
              <table class="table table-condensed" style="background-color: white;">

                <tr ng-repeat="activityType in planArea.activityTypes | filter: {isPlan:true}">
                  <td style="padding-left: 15px;">{{activityType.name}}</td>
                  <td class="plan-desc" title="{{activityType.routines[0].description}} {{activityType.routines[0].estimatedLaborHour}} Hr">{{activityType.routines[0].description}} {{activityType.routines[0].estimatedLaborHour}} Hr
                    <a role="button" ng-click="updateHrDescPlan($event, row, activityType.routines[0])"><i class="fa fa-edit" aria-hidden="true"></i></a>
                  </td>
                  <!--<td class="text-center" style="vertical-align: middle;">-->
                  <!--<a href="" ng-click="updateHrDescPlan($event, row, activityType.routines[0])"><i class="fa fa-edit" aria-hidden="true"></i></a>-->
                  <!--</td>-->
                  <td class="text-center" colspan="12" style="vertical-align: middle;" ng-repeat="row in monthMaxDays">
                    <!--<a ng-if="!activityType.isPlan" role="button" ng-click="addMonthlyPlan($event, row, activityType.name)"><i class="fa fa-plus" aria-hidden="true"></i></a>-->

                    <a role="button" ng-click="addMonthlyPlan($event, row, activityType)" ng-init="isShow = isSchedule(activityType.routines[0].routineSchedules, row);" title="{{viewTitle}}" ng-mouseover="hoverIn(activityType.routines[0].routineSchedules, row)">
                      <i ng-show="isShow;" class="fa fa-calendar-check-o" aria-hidden="true"></i>
                      <i ng-hide="isShow" class="fa fa-calendar-plus-o gray" aria-hidden="true"></i>
                    </a>
                    <!--<a ng-hide="$last" class="btn btn-xs" ng-click="copyToNextMonth(row, activityType.routines[0].routineSchedules)">-->
                      <!--<i title="Copy to next month" class="fa fa-arrow-right"></i> </a>-->
                  </td>
                  <td style="vertical-align: middle;" class="text-center">
                    <span ng-if="activityType.routines[0].total">{{activityType.hours}}</span>
                    <span ng-if="!activityType.routines[0].total">As Needed</span>
                  </td>
                </tr>
                <tr>
                  <td colspan="14">
                    <button type="button" class="btn btn-success btn-xs" ng-click="addCustomPlanActivity(planArea)"><i class="fa fa-plus"></i> Add Tasks for {{planArea.name}}</button>

                      </b>
                  </td>
              </table>
            </td> 
          </tr>
          <tr>
            <td>


              

              <button type="button" class="btn btn-primary btn-xs" ng-click="addCustomPlanArea()"><i class="fa fa-plus"></i>Add New Plan Area</button>

            </td>
          

              

          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!--<div ng-include="'./modules/tasks/views/plan-activity-summary.client.view.html'"></div>-->

</section>

Select allOpen in new window

I updated the code with your clean solution and while it didn't fix the problem it didnt' break anything either.  Check out the updated screenshot.  The red boxes I want all the columns lined up.
https://www.screencast.com/t/KnwE8HCatNew screenshot

The problem is you have nested tables and they don't have the same number of columns in the nested tables. It is difficult to see how to fix this as we don't have your data or controller code but that is where you need to look

Do an inspect element of your code (right click element -> Inspect Element) and try to see in the console where you have missing / extra columns - then update your table code to include / remove the necessary columns to fix the alignment.

You should also familiarise yourself with directives like ng-class that allow you to instead of this

<i ng-if="planArea.isCollapsed" class="fa fa-plus" aria-hidden="true"></i>
<i ng-if="!planArea.isCollapsed" class="fa fa-minus" aria-hidden="true"></i>

Select allOpen in new window

you can do this

<i ng-class="{'fa fa-plus': planArea.isCollapsed, 'fa fa-minus': !planArea.isCollapsed}" aria-hidden="true" ></i>

Select allOpen in new window