title: Responsive table works in firefox not in chrome
body: <p>Column headers break into two lines for very small length. Firefox has no problems but doesn't work in chrome. I have tried changing the boostrap versions. I also moved the table-responsive tag to the panel div element. If there is no data in the table the column headers don't break into two lines. I have a feeling the the "-" &amp; ":" characters are forcing the line breaks. </p>
  
  <pre><code>&lt;div class="panel panel-primary" &gt;
              &lt;div class="panel-heading"&gt;Task Details&lt;/div&gt;
              {{taskctrlr.status}}
              &lt;div id="taskloadstatus" style="background-color:LightSkyBlue;color: #FFFFFF;"&gt;Please wait, tasks are being loaded&lt;/div&gt;
  
              &lt;table  class="table table-striped table-hover table-responsive table-bordered"&gt;
                  &lt;tr class="info"&gt;
                      &lt;th&gt;Title&lt;/th&gt;
                      &lt;th&gt;
                          &lt;a href="#" ng-click="orderByField='payorName'; reverseSort = !reverseSort"&gt;
                          Payor&lt;span ng-show="orderByField == 'payorName'"&gt;&lt;span ng-show="!reverseSort" class="glyphicon glyphicon-chevron-up"&gt;&lt;/span&gt;&lt;span ng-show="reverseSort" class="glyphicon glyphicon-chevron-down"&gt;&lt;/span&gt;&lt;/span&gt;
                          &lt;/a&gt;
                      &lt;/th&gt;
                      &lt;th&gt;
                          &lt;a href="#" ng-click="orderByField='clientId'; reverseSort = !reverseSort"&gt;
                          Client ID&lt;span ng-show="orderByField == 'clientId'"&gt;&lt;span ng-show="!reverseSort" class="glyphicon glyphicon-chevron-up"&gt;&lt;/span&gt;&lt;span ng-show="reverseSort" class="glyphicon glyphicon-chevron-down"&gt;&lt;/span&gt;&lt;/span&gt;
                          &lt;/a&gt;
                      &lt;/th&gt;
                      &lt;!--th&gt;
                          &lt;a href="#" ng-click="orderByField='payorId'; reverseSort = !reverseSort"&gt;
                          Payor ID&lt;span ng-show="orderByField == 'payorId'"&gt;&lt;span ng-show="!reverseSort" class="glyphicon glyphicon-chevron-up"&gt;&lt;/span&gt;&lt;span ng-show="reverseSort" class="glyphicon glyphicon-chevron-down"&gt;&lt;/span&gt;&lt;/span&gt;
                      &lt;/th--&gt;
                      &lt;th&gt;
                          &lt;a href="#" ng-click="orderByField='accessionID'; reverseSort = !reverseSort"&gt;
                          Accession Number&lt;span ng-show="orderByField == 'accessionID'"&gt;&lt;span ng-show="!reverseSort" class="glyphicon glyphicon-chevron-up"&gt;&lt;/span&gt;&lt;span ng-show="reverseSort" class="glyphicon glyphicon-chevron-down"&gt;&lt;/span&gt;&lt;/span&gt;
                      &lt;/th&gt;
                      &lt;th&gt;
                          &lt;a href="#" ng-click="orderByField='assignedTo'; reverseSort = !reverseSort"&gt;
                          Assigned To&lt;span ng-show="orderByField == 'assignedTo'"&gt;&lt;span ng-show="!reverseSort" class="glyphicon glyphicon-chevron-up"&gt;&lt;/span&gt;&lt;span ng-show="reverseSort" class="glyphicon glyphicon-chevron-down"&gt;&lt;/span&gt;&lt;/span&gt;
                      &lt;/th&gt;
                      &lt;th&gt;
                          &lt;a href="#" ng-click="orderByField='createDate'; reverseSort = !reverseSort"&gt;
                          Create Date&lt;span ng-show="orderByField == 'createDate'"&gt;&lt;span ng-show="!reverseSort" class="glyphicon glyphicon-chevron-up"&gt;&lt;/span&gt;&lt;span ng-show="reverseSort" class="glyphicon glyphicon-chevron-down"&gt;&lt;/span&gt;&lt;/span&gt;
                      &lt;/th&gt;
                      &lt;th&gt;Follow Up Tasks&lt;/th&gt;
                      &lt;th&gt;Action&lt;/th&gt;
                      &lt;th&gt;Comments&lt;/th&gt;
                  &lt;/tr&gt;
                  &lt;tr ng-repeat="task in taskctrlr.taskList |orderBy:orderByField:reverseSort track by $index"&gt;
                      &lt;td&gt;{{task.title}}&lt;/td&gt;
                      &lt;td&gt;{{task.payorName}}&lt;/td&gt;
                      &lt;td&gt;{{task.clientId}}&lt;/td&gt;
                      &lt;!--td&gt;{{task.payorId}}&lt;/td--&gt;
                      &lt;td&gt;{{task.accessionID}}&lt;/td&gt;
                      &lt;td&gt;
                          &lt;div ng-show="task.assignedTo != null"&gt;
                              {{task.assignedTo}}
                          &lt;/div&gt;
                          &lt;div ng-show="task.assignedTo == null "&gt;
                              &lt;a class="btn btn-default" ng-click="taskctrlr.pickUpTask(task.taskId);taskctrlr.getTasks()"&gt;Pick Up&lt;/a&gt;
                          &lt;/div&gt;                          
                      &lt;/td&gt;
                      &lt;td&gt;{{task.createDate}}&lt;/td&gt;
                      &lt;td&gt;    
                          &lt;div ng-show="task.showsubtask"&gt;
                              &lt;a ng-click="task.showsubtask=false"&gt;Hide&lt;/a&gt;
                              &lt;table class="table"&gt;
                                  &lt;tr class="success"&gt;
                                      &lt;!--th&gt;Followup Title&lt;/th--&gt;
                                      &lt;th&gt;Description&lt;/th&gt;
                                      &lt;th&gt;Due Date&lt;/th&gt;
                                      &lt;th&gt;Follow up Action&lt;/th&gt;
                                  &lt;/tr&gt;
                                  &lt;tr ng-repeat="subtask in task.subtasklist track by $index"&gt;
                                      &lt;!--td&gt;{{subtask.name}}&lt;/td--&gt;
                                      &lt;td&gt;{{subtask.description}}&lt;/td&gt;
                                      &lt;td&gt;{{subtask.duedate}}&lt;/td&gt;
                                      &lt;td&gt;
                                          &lt;form name="FollowUpForm"&gt;
                                              &lt;input type="text" class="form-control" ng-model="subtask.followupComment" placeholder="Enter resolution to Complete..." required&gt;                                                                                           
                                              &lt;a class="btn btn-default" ng-disabled="FollowUpForm.$invalid" ng-click="taskctrlr.dofollowup(subtask.id,task.taskId,subtask.followupComment)"&gt;Complete&lt;/a&gt;
                                          &lt;/form&gt;    
                                      &lt;/td&gt;                                       
                                  &lt;/tr&gt;
                          &lt;/table&gt;
                          &lt;/div&gt;
                          &lt;div ng-show="! task.showsubtask &amp;&amp; task.subtasklist.length &gt; 0 "&gt;
                              &lt;a ng-click="task.showsubtask=true"&gt;Show&lt;/a&gt;
                          &lt;/div&gt;
  
                      &lt;/td&gt;
                      &lt;td&gt;
                      &lt;a class="btn btn-primary" ng-click="taskctrlr.gototask(task.taskURL,task.taskId,task.assignedTo)"&gt;Do it&lt;/a&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;form name="AddCommentForm"&gt;
                              &lt;input type="text" class="form-control" ng-model="task.comment" ng-change="id=task.comment" placeholder="Add comments here..." required&gt;
  
                                  &lt;!--div&gt;$dirty: {{ AddCommentForm.$dirty}}&lt;/div&gt;
                                  &lt;div&gt;$pristine: {{ AddCommentForm.$pristine }}&lt;/div--&gt;
                               &lt;span class="input-group-btn"&gt;
                                   &lt;a class="btn btn-warning" ng-disabled="AddCommentForm.$invalid" type="button" id="addComments" ng-click="taskctrlr.updateComment(task.taskId,task.comment,$index); addAlert()"&gt;Add New Comment&lt;/a&gt;
                                &lt;/span&gt;
                          &lt;/form&gt;
                      &lt;/td&gt;
                      &lt;!-- /bonita/API/bpm/humanTask/{{task.taskId}}?d=processId --&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Chrome:
  <img src="https://i.stack.imgur.com/7wvqc.jpg" alt="enter image description here"></p>
  
  <p>Firefox:
  <img src="https://i.stack.imgur.com/b9mhm.jpg" alt="enter image description here"></p>